Skip to content

Added 0.40 compatibility and updated usage in README #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
syousif94 wants to merge 13 commits into
base: master
Choose a base branch
from
Open

Added 0.40 compatibility and updated usage in README #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
08afe72
added react native 0.40 headers
syousif94 Mar 25, 2017
0d60974
Update package.json
syousif94 Mar 25, 2017
c5d3d47
Update package.json
syousif94 Mar 25, 2017
14011f6
Update README.md
syousif94 Mar 25, 2017
157dc24
Merge pull request #1 from syousif94/patch-1
syousif94 Mar 25, 2017
fb5e84b
downsample before crop
syousif94 May 10, 2017
df10fbb
bump version
syousif94 May 10, 2017
dcaec4d
fixed scaling
syousif94 May 10, 2017
2d7f8dc
added missing semicolon
syousif94 May 10, 2017
4f5dbec
cleaner code
syousif94 May 10, 2017
9f387df
increase image size
syousif94 May 10, 2017
acc5b8a
bumped version
syousif94 May 10, 2017
43f9e2b
switched from png to jpeg
syousif94 Jun 8, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 12 additions & 10 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,10 @@ If you get stuck open an issue. It's the first time I've published react native
### Import module

```javascript
const React = require('react-native');
const {ReactNativeImageCropping} = React.NativeModules;
import {
NativeModules,
} from 'react-native'
const { ReactNativeImageCropping } = NativeModules;
```

### Crop the image
Expand All @@ -38,12 +40,12 @@ It is using RCTImageLoader so it should be able to crop any image that react kno
const originalImage = require('CrazyFlowers.jpg');

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

#### Lock to specific aspect ratio:
Expand All @@ -63,15 +65,15 @@ Available aspect ratios:
Example:

```javascript
let aspectRatio = ReactNativeImageCropping.AspectRatioSquare;
const aspectRatio = ReactNativeImageCropping.AspectRatioSquare;

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


2 changes: 1 addition & 1 deletion ReactNativeImageCropping.h
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
#import "RCTBridgeModule.h"
#import <React/RCTBridgeModule.h>
#import "TOCropView.h"
#import <RCTImageLoader.h>

Expand Down
26 changes: 21 additions & 5 deletions ReactNativeImageCropping.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,8 +88,24 @@ - (NSDictionary *)constantsToExport

- (void)handleImageLoad:(UIImage *)image {

// hardcoded downsample of image

@meznaric meznaric May 11, 2017

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why would we want that? I think it makes more sense to keep original size.

@syousif94 syousif94 May 11, 2017

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi sorry, I did not realize further commits would modify this pull request. I think it would be helpful to let users set a max resolution though because loading a cropped full resolution photo from the camera album has a noticeable delay on my 6S. I can add that feature or just close this pull request.

@meznaric meznaric May 12, 2017

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's a good feature to have especially if delay is noticeable. Did you think about JS API already?

So far we have:

.cropImageWithUrlAndAspect(imageUrl, aspectRatio)
.cropImageWithUrl(originalImage.uri)

without breaking backwards compatibility we could introduce something like
.cropImage(originalImage.uri, options)
where options would be:

{
    maxWidth: 150, // optional, default no max width
    aspectRatio: ReactNativeImageCropping.AspectRatioSquare, // optional, default not locked
}

It would be easy to extend as well.

@syousif94 syousif94 May 12, 2017

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah sounds good, I'll update the pull request over the weekend.

float oldWidth = image.size.width;
UIImage *scaledImage = image;
if (oldWidth > 800) {
float scaleFactor = 800 / oldWidth;

float newHeight = image.size.height * scaleFactor;
float newWidth = oldWidth * scaleFactor;

UIGraphicsBeginImageContext(CGSizeMake(newWidth, newHeight));
[image drawInRect:CGRectMake(0, 0, newWidth, newHeight)];
scaledImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

}

UIViewController *root = [[[[UIApplication sharedApplication] delegate] window] rootViewController];
TOCropViewController *cropViewController = [[TOCropViewController alloc] initWithImage:image];
TOCropViewController *cropViewController = [[TOCropViewController alloc] initWithImage:scaledImage];
cropViewController.delegate = self;

if(self.aspectRatio) {
Expand All @@ -113,10 +129,10 @@ - (void)cropViewController:(TOCropViewController *)cropViewController didCropToI
[cropViewController dismissViewControllerAnimated:YES completion:nil];
});

NSData *pngData = UIImagePNGRepresentation(image);
NSString *fileName = [NSString stringWithFormat:@"memegenerator-crop-%lf.png", [NSDate timeIntervalSinceReferenceDate]];
NSString *filePath = [NSTemporaryDirectory() stringByAppendingPathComponent:fileName]; //Add the file name)
[pngData writeToFile:filePath atomically:YES];
NSData *jpgData = UIImageJPEGRepresentation(image, 80);
NSString *fileName = [NSString stringWithFormat:@"resized-%lf.jpg", [NSDate timeIntervalSinceReferenceDate]];
NSString *filePath = [NSTemporaryDirectory() stringByAppendingPathComponent:fileName];
[jpgData writeToFile:filePath atomically:YES];
NSNumber *width = [NSNumber numberWithFloat:image.size.width];
NSNumber *height = [NSNumber numberWithFloat:image.size.height];

Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-native-image-cropping",
"version": "1.0.0",
"version": "1.1.5",
"keywords": "react-native image cropping",
"description": "Simple image cropping library for react-native.",
"license": "MIT",
Expand All @@ -9,6 +9,6 @@
"TOCropViewController": "git+https://github.com/meznaric/TOCropViewController.git"
},
"peerDependencies": {
"react-native": "^0.28.0"
"react-native": ">=0.40.0"
}
}