Hey Guys,
I’d like to share my photo-cropper that I have been building for my upcoming app. If people like it I’ll continue to support it. I’m accepting every bit of feedback so feel free to open an issue.
Check it out and let me know what you think.
P.S. Right now I’m only supporting iOS, but it could very well be that it runs on Android too.
thank you for share, I’ll try
Nice, thanks for sharing this!
Very nice and useful plugin.
I would like to know if you support Android platform or not?
Nice to hear.
I wasn’t planning on in the near future. Haven’t spend too much time on Android yet. If anybody is interested in debugging this further I will gladly accept pull requests though.
thanks for share, my friend
Hi,
first of all honestly its really great plugin than any other…
i found it’s working on both android and ios
can you tell me that how to automatically zoom out the large size image ?
what i mean is that when i use large photo then it is starting from top left corner
so i have to zoom out it to make it fit to the screen.
is there any way i can do it ?
thank you.
I just finished packaging everything up and released it on bower under the MIT license. Also I’ve landed a solid pull request which fixes a couple of bugs.
@jay, this patch also fixes your problem. Now it automatically resizes to the smallest possible size and starts in the center.
Hey,
This plugin looks awesome. When you say it returns ‘Returns a canvas element with the new cropped image.’ What is this returning? I’m not asking for code to be written for me but a sort of psudo example? Like, will that be co-ordinates on the image that I submit to the server with the picture and crop to that?
Tom
I just released version 1.0.0 which introduces an incompatible API change. jrCrop must now be included as a module-dependency.
Hi Tom,
Sorry for the late response, must have missed it. Examples can be found in the examples folder. It doesn’t actually scale an image, it only returns the cropped version on a canvas element. It is up to the developer to implement any logic to save this on the server. For instance, you could convert the element to a dataURL and send that to the server for processing and storage.
canvas.toDataURL('image/jpeg', 1.0);This plugin is really awesome. It looks nice and works as expected almost perfectly except for one situation where when the input is the FILE_URI returned directly from the camera and the user immediately tap “Choose” without doing any zooming at all then the plugin seen to returns an empty object.
First of all Thanks for that very nice plug in !
But i have a problem:
I would like to load a picture (4608x3072 for example) and crop it to a rectangle in the format 16:9.
But when I try to, the cropper window resizes the loaded picture to either maximum height or maximum width, but i like to cut a bit of the height and the width.
Do you know any possibility to do so ?
Yes! I’ve run into this same issue. Is there a way to force a “dirty” state on the image to make the cropper things it’s been adjusted?
@jorami Any thoughts on this? Sorry to be a bother, but I’d love your input on this issue. Thanks so much!
Tried my darndest to get this working in android but best I get is a non-movable image and no cropping area. Dragging on the image sometimes moves the image a few pixels…most of the time it doesn’t. No idea what’s going on.
Any ideas to get this working nicely with Android. I really just want a clean way for users to generate square images, a la instagram.
how should i modify the code if i want a circle crop instead of square ?
Hi there! nice looking plugin so far, good work. I’m assuming that when I do:
.then(function(canvas) {
var image = canvas.toDataURL();
});
the toDataUrl() method will retrieve the binary image file I can send the server for storage? Anyways, I wish I had gotten that far, because I’m getting this error:
Uncaught SecurityError: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: tainted canvases may not be exported.
Any ideas on how to fix it would be greatly appreciated!
Kind Regards,
-J
Hi @jlstr,
That is probably because the image you are trying to crop is from a different ‘domain’. This is a browser limitation due to security issues. To verify this try storing the image on a directory in your app and cropping it from a local url. An ugly fix for this would be to send the url to a snippet on a server that retrieves the image and sends it back as base64 encoded data.
If you are using the camera API there are two ways you could try I guess.
Bare in mind that using base64 data will probably hurt your performance.
Cool!
Actually, I think we can disregard that issue, as it isn’t a problem on a real device or in the emulator. Now, I’m having another issue. I’m trying to use Cordova File Transfer to send the base64 encoded string (extracted from the canvas object via #toDataURL()) to my own server for storage, but it does not work, the following error is issued:
FileTransferError {
code = 1;
source = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/
…
Do you happen to know what could be causing this error? is it something related to this problem?
Could another likely cause be that the base64 encoded string is too long? Anyways, let me know what do you think. Perhaps you have encountered this problem before/ or maybe there’s a “right” way of doing upload of cropped image using cordova file transfer (and your plugin)?
Thanks for the kind reply!
-J
@rikka94, I released version 1.1.0 which features the circle option to do exactly what you want.
I don’t think it’s because the string is too long. You could try converting the canvas to BLOB, maybe that will resolve the issue. I’m not really sure otherwise what could cause this. So please let me know if you managed to resolve it.