meznaric / react-native-image-cropping

Wrapper around 3rd party library for image cropping on iOS

Simple react-native image cropping library wrapper around siong1987/TOCropViewController

Installation

Supported only on iOS.

Add it to your project

1. npm install react-native-image-cropping --save
2. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
3. Go to node_modules ➜ react-native-image-cropping and add ReactNativeImageCropping.xcodeproj
4. In XCode, in the project navigator, select your project. Add libReactNativeImageCropping.a to your project's Build Phases ➜ Link Binary With Libraries
5. Click ReactNativeImageCropping.xcodeproj in the project navigator and go the Build Settings tab. Make sure 'All' is toggled on (instead of 'Basic'). Look for Header Search Paths and make sure it contains both $(SRCROOT)/../react-native/React and $(SRCROOT)/../../React - mark both as recursive.
6. Re-run your project (Cmd+R)

Setup trouble?

If you get stuck open an issue. It's the first time I've published react native package and I may have not provided all necessary information.

Usage

Import module

const React = require('react-native');
const {ReactNativeImageCropping} = React.NativeModules;

Crop the image

It is using RCTImageLoader so it should be able to crop any image that react knows how to load / display.

Without aspect ratio restriction:

const originalImage = require('CrazyFlowers.jpg');

ReactNativeImageCropping
	.cropImageWithUrl(originalImage.uri)
    .then(image => {
		//Image is saved in NSTemporaryDirectory!
		//image = {uri, width, height}	
	},
	err => console.log(b));

Lock to specific aspect ratio:

Available aspect ratios:

 - AspectRatioOriginal
 - AspectRatioSquare
 - AspectRatio3x2
 - AspectRatio5x4
 - AspectRatio4x3
 - AspectRatio5x4
 - AspectRatio7x5
 - AspectRatio16x9

Example:

let aspectRatio = ReactNativeImageCropping.AspectRatioSquare;

ReactNativeImageCropping
    .cropImageWithUrlAndAspect(imageUrl, aspectRatio)
    .then(image => {
        //Image is saved in NSTemporaryDirectory!
        //image = {uri, width, height}  
    },
    err => console.log(b));

react-native-image-cropping's Issues

Add method to set max/min zoom in the crop box

Could you add a method that also defines the max zoom, something like:

.cropImageWithUrlAndAspectAndMaxZoom(imageUrl, aspectRatio, MaxZoomWidth, MaxZoomHeight)

the idea is that MaxZoomWidth and MaxZoomHeight would be the same as the width and height in the image object (image = { uri, width, height }) that is returned in the then() block after cropping has finished.

Example: When I zoom in with two fingers until I can't zoom any furter and click "Done" the width and height values that are returned in the image object are 24. I would like to set MaxZoomWidth and Height to f.x. 300.

Great work by the way!

Cropper never get opened

I am using this below code:
ReactNativeImageCropping.cropImageWithUrl(uri)
.then((image) => {
//Image is saved in NSTemporaryDirectory!
//image = {uri, width, height}
console.log(image)
}, (err) => console.log(err));

cropping screen or error never shows up

Android Support

Any option for crop image with base64 Data?

I'm looking inside ReactNativeImageCropping.m and it seems not to be possible yet.

Something like:

ReactNativeImageCropping.cropImageWithBase64(base64Image)

Undefined is not an object

I am unable to load the package I keep getting this error.

Certain ratio to the package

Hi,

I want to crop image as 980*400.
Is there any way?

Thanks.

_reactNative.NativeModules.ReactNativeImageCropping.cropImageWithUrl

i had error question in xcode 8

loadImageWithURLRequest:imageUrlrequest this function is not undefine

Is it possible to change text (Cancel, Done)

Custom Aspect Ratios?

Is it possible to set a custom aspect ratio. I need to fix the cropping to portrait mode.

didn't support RN 0.50

after reference in xcode，then build failed，and can't run anymore

but the project “TOCropViewControllerExample” （https://github.com/siong1987/TOCropViewController） in xcode running well

what can I do ？thank you so much！

how to pass Image path not as url

Hi, this library is really great, it works well with http urls but when i try to pass the camera image path like assets-library or disk path it gave me error. is there any workaround for this issue? or i am doing something wrong? thank you.

How to change the size of the cropper ? to make it a square ?

First of all, thanks so much for the module, I have been building my image cropper from scratch for a week or so, but I stuck at getting the correct crop sizes correct, and than I found your module, it's just so easy 😄

Well, I really need a way to resize the cropper to be like a square ?

Thanks again!

Can i use this code for Android

Can I use this code for Android (React native) ?

detailed example

Hi could you provide more detailed example on how to use the package?

Is it possible to contain the cropping view inside an existing view?

Currently, when cropImageWithUrl is called, the crop view fades in and takes up the whole screen (even ignoring the status bar at the top). Is it possible to set the size of this view so that it does not do this?

react.default.NativeModules.ReactNativeImageCropping undefined

I followed the steps https://www.npmjs.com/package/react-native-image-cropping.

I am getting this error. Someone tell me what is the problem here?

Add methods to programatically resize/crop/rotate or change quality of the image.

2 people on Facebook requested some extra features.

Proposed methods:

ReactNativeImageCropping.resize(imageUri, newWidth, newHeight);
ReactNativeImageCropping.crop(imageUri, x, y, width, height);
ReactNativeImageCropping.rotate(imageUri, 90); //Degrees should be 90,180, 270 or should we support all?
ReactNativeImageCropping.changeQuality(imageUri, 90); //Quality from 1-100 similar to what JPEG
ReactNativeImageCropping.moveToAlbum(imageUri, albumName);
ReactNativeImageCropping.moveToDocuments(imageUri, filename); //Is this needed?

Idea is that you should always be able to pass in original image object and you will always get back image with image.uri set to path to image in NSTemporaryDirectory. User should then decide where he wants to move it using moveToDocuments or moveToAlbum.

Any thoughts?

RN 0.40 requires a change in headers

RN 0.40 requires a change in headers

No visible @interface for 'RCTImageLoader' declares the selector 'loadImageWithURLRequest:callback:'

RN 0.25.1

No visibile @interface for 'RCTImageLoader' declares the...

During compile time I am getting the following error:

No visibile @interface for 'RCTImageLoader' declares the selector 'loadImageWithTag:callback:'

Versions:

React Native: 0.32.0

CropRectangle to doesn't flip when press rotation button

I want cropped rectangle to doesn't flip when I press rotation button?
Is there any way?