A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/react-native-community/react-native-image-editor below:

callstack/react-native-image-editor: A library providing an API for cropping images from the web and the local file system.

@react-native-community/image-editor

Image Editor Native module for React Native.

Originally extracted from React Native issue#23313 and maintained by the community.

yarn add @react-native-community/image-editor
# or
npm install @react-native-community/image-editor --save

Start by importing the library:

import ImageEditor from '@react-native-community/image-editor';

Crop the image specified by the URI param. If URI points to a remote image, it will be downloaded automatically. If the image cannot be loaded/downloaded, the promise will be rejected.

If the cropping process is successful, the resultant cropped image will be stored in the cache path, and the CropResult returned in the promise will point to the image in the cache path. ⚠️ Remember to delete the cropped image from the cache path when you are done with it.

ImageEditor.cropImage(uri, cropData).then((result) => {
  console.log('Cropped image uri:', result.uri);
});
Name Type Description offset { x: number, y: number } The top-left corner of the cropped image, specified in the original image's coordinate space size { width: number, height: number } Size (dimensions) of the cropped image displaySize
(optional) { width: number, height: number } Size to which you want to scale the cropped image resizeMode
(optional) 'contain' | 'cover' | 'stretch' | 'center' Resizing mode to use when scaling the image (iOS only, Android resize mode is always 'cover', Web - no support)
Default value: 'cover' quality
(optional) number A value in range 0.0 - 1.0 specifying compression level of the result image. 1 means no compression (highest quality) and 0 the highest compression (lowest quality)
Default value: 0.9 format
(optional) 'jpeg' | 'png' | 'webp' The format of the resulting image.
Default value: based on the provided image;
if value determination is not possible, 'jpeg' will be used as a fallback.
'webp' isn't supported by iOS. includeBase64
(optional) boolean Indicates if Base64 formatted picture data should also be included in the CropResult.
Default value: false headers
(optional) object | Headers An object or Headers interface representing the HTTP headers to send along with the request for a remote image. Name Type Description uri string The path to the image file (example: 'file:///data/user/0/.../image.jpg')
WEB: uri is the data URI string (example 'data:image/jpeg;base64,/4AAQ...AQABAA') path string The URI of the image (example: '/data/user/0/.../image.jpg')
WEB: path is the blob URL (example 'blob:https://example.com/43ff7a16...e46b1') name string The name of the image file. (example: 'image.jpg') width number The width of the image in pixels height number Height of the image in pixels size number The size of the image in bytes type string The MIME type of the image ('image/jpeg', 'image/png', 'image/webp') base64
(optional) string The base64-encoded image data example: '/9j/4AAQSkZJRgABAQAAAQABAAD'
if you need data URI as the source for an Image element for example, you can use data:${type};base64,${base64}

For more advanced usage check our example app.


RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4