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
{ width: number, height: number }
Size to which you want to scale the cropped image resizeMode
'contain' | 'cover' | 'stretch' | 'center'
Resizing mode to use when scaling the image (iOS only, Android resize mode is always 'cover'
, Web - no support)
'cover'
quality
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)
0.9
format
'jpeg' | 'png' | 'webp'
The format of the resulting image.
'jpeg'
will be used as a fallback.
'webp'
isn't supported by iOS. includeBase64
boolean
Indicates if Base64 formatted picture data should also be included in the CropResult
.
false
headers
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'
)
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'
)
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
string
The base64-encoded image data example: '/9j/4AAQSkZJRgABAQAAAQABAAD'
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