Michaelvilleneuve / React Native Perspective Image Cropper
Licence: mit
Perform custom crop, resizing and perspective correction ππΌ
Stars: β 223
Programming Languages
java
68154 projects - #9 most used programming language
Projects that are alternatives of or similar to React Native Perspective Image Cropper
React Avatar Editor
Small avatar & profile picture component. Resize and crop uploaded images using a intuitive user interface.
Stars: β 1,846 (+727.8%)
Mutual labels: image, crop
Lipo
π Free image manipulation API service built on top of Sharp (an alternative to Jimp, Graphics Magic, Image Magick, and PhantomJS)
Stars: β 101 (-54.71%)
Mutual labels: image, crop
Bimg
Go package for fast high-level image processing powered by libvips C library
Stars: β 1,394 (+525.11%)
Mutual labels: image, crop
Arclayout
With Arc Layout explore new styles and approaches on material design
Stars: β 1,662 (+645.29%)
Mutual labels: crop, custom
Extended image
A powerful official extension library of image, which support placeholder(loading)/ failed state, cache network, zoom pan image, photo view, slide out page, editor(crop,rotate,flip), paint custom etc.
Stars: β 1,021 (+357.85%)
Mutual labels: image, crop
Flutter image editor
Flutter plugin, support android/ios.Support crop, flip, rotate, color martix, mix image, add text. merge multi images.
Stars: β 181 (-18.83%)
Mutual labels: image, crop
Croperino
π· A simple image cropping tool that provides gallery or camera help for Native Android (Java)
Stars: β 176 (-21.08%)
Mutual labels: image, crop
Rskimagecropper
An image cropper / photo cropper for iOS like in the Contacts app with support for landscape orientation.
Stars: β 2,371 (+963.23%)
Mutual labels: image, crop
Atgmediabrowser
Image slide-show viewer with multiple predefined transition styles, with ability to create new transitions with ease.
Stars: β 186 (-16.59%)
Mutual labels: image, custom
Docker Nginx Image Proxy
on the fly image cropping with gravity, resize and compression microservice
Stars: β 79 (-64.57%)
Mutual labels: image, crop
Flutter crop
Crop any widget/image in Android, iOS, Web and Desktop with fancy and customizable UI, in pure Dart code.
Stars: β 107 (-52.02%)
Mutual labels: image, crop
Nova Advanced Image Field
ππ A Laravel Nova advanced image field with cropping and resizing using Cropper.js and Intervention Image
Stars: β 67 (-69.96%)
Mutual labels: image, crop
Mergi
go library for image programming (merge, crop, resize, watermark, animate, ease, transit)
Stars: β 127 (-43.05%)
Mutual labels: image, crop
Smartcircle
βοΈAutomatically determine where to crop a circular image out of a rectangular.
Stars: β 29 (-87%)
Mutual labels: image, crop
Kirby Autofocus
Content aware image cropping for Kirby. Kirby 2 and 3.
Stars: β 35 (-84.3%)
Mutual labels: image, crop
Gimage
A PHP library for easy image handling. πΌ
Stars: β 148 (-33.63%)
Mutual labels: image, crop
Ddperspectivetransform
π² Warp image transformation
Stars: β 186 (-16.59%)
Mutual labels: image, crop
React Native perspective image cropper ππΌ
A component that allows you to perform custom image crop and perspective correction !
Designed to work with React Native Document Scanner
https://github.com/Michaelvilleneuve/react-native-document-scanner
Installation ππ
$ npm install react-native-perspective-image-cropper --save
$ react-native link react-native-perspective-image-cropper
This library uses react-native-svg, you must install it too. See https://github.com/react-native-community/react-native-svg for more infos.
Android Only
If you do not already have openCV installed in your project, add this line to your settings.gradle
include ':openCVLibrary310'
project(':openCVLibrary310').projectDir = new File(rootProject.projectDir,'../node_modules/react-native-perspective-image-cropper/android/openCVLibrary310')
Crop image
- First get component ref
<CustomCrop ref={ref => (this.customCrop = ref)} />
- Then call :
this.customCrop.crop();
Props
Props | Type | Required | Description |
---|---|---|---|
updateImage |
Func |
Yes | Returns the cropped image and the coordinates of the cropped image in the initial photo |
rectangleCoordinates |
Object see usage |
No | Object to predefine an area to crop (an already detected image for example) |
initialImage |
String |
Yes | Base64 encoded image you want to be cropped |
height |
Number |
Yes | Height of the image (will probably disappear in the future |
width |
Number |
Yes | Width of the image (will probably disappear in the future |
overlayColor |
String |
No | Color of the cropping area overlay |
overlayStrokeColor |
String |
No | Color of the cropping area stroke |
overlayStrokeWidth |
Number |
No | Width of the cropping area stroke |
handlerColor |
String |
No | Color of the handlers |
enablePanStrict |
Bool |
No | Enable pan on X axis, and Y axis |
Usage
import CustomCrop from "react-native-perspective-image-cropper";
class CropView extends Component {
componentWillMount() {
Image.getSize(image, (width, height) => {
this.setState({
imageWidth: width,
imageHeight: height,
initialImage: image,
rectangleCoordinates: {
topLeft: { x: 10, y: 10 },
topRight: { x: 10, y: 10 },
bottomRight: { x: 10, y: 10 },
bottomLeft: { x: 10, y: 10 }
}
});
});
}
updateImage(image, newCoordinates) {
this.setState({
image,
rectangleCoordinates: newCoordinates
});
}
crop() {
this.customCrop.crop();
}
render() {
return (
<View>
<CustomCrop
updateImage={this.updateImage.bind(this)}
rectangleCoordinates={this.state.rectangleCoordinates}
initialImage={this.state.initialImage}
height={this.state.imageHeight}
width={this.state.imageWidth}
ref={ref => (this.customCrop = ref)}
overlayColor="rgba(18,190,210, 1)"
overlayStrokeColor="rgba(20,190,210, 1)"
handlerColor="rgba(20,150,160, 1)"
enablePanStrict={false}
/>
<TouchableOpacity onPress={this.crop.bind(this)}>
<Text>CROP IMAGE</Text>
</TouchableOpacity>
</View>
);
}
}
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].