I am looking for best solution for cropping image in android as well as ios, as there any plugin or angular js plugin available for this ??
Simple search on the forum should give you some good results
http://ngmodules.org/modules/cropme
If your up for helping in the development of another, there’s this one specifically for ionic
1 Like
Thanks… for this 
hi mhartington,
here…
https://github.com/JrSchild/jr-crop - is only available for ios
i have debugged it and done it for android. 
and its working good.
thank you.
@jay how did you get it to work on android?
Is the dragging gesture working with you ?
For me, the gesture is not working 
i could found the problem in android was that…
the upper layer of opacity was hidden, while dragging…
so i just debugged and got solution.
are you facing the same problem on your side ?
or
can you tell me more about this issue you are facing in android ?
Yes its almost the same issue with the opacity.
As soon as you touch the screen, the image disappears.
Do you think you can add a pull request jr-crop repo?
does your image completely hide while dragging ?
On desktop chrome, it does.
However on android hardware, the image is there but the dragging window is not shown.
Also, the image is not aligned in the center
yes, i had the same problem in android that…
image can be dragged but the crop window is not shown once tap on image.
then i just debugged using inspect element (remote debugging with chrome)
the solution i found is only for android not for any browser on desktop like chorme or mozila etc.
can you make pull request, because i never tried it. and i also don’t know how to do it.
change in jr-crop.js file is
Line number 13 : '<div class="jr-crop-center-container">' +
change it to
'<div class="jr-crop-center-container" style="opacity:0.5; background:#000;" >' +I’ve integrated this angular image cropper into my app:
It works quite nicely (Only tested on Android). I had to do one fix to get it working though. JQuery (if you’re using it) wraps the events and doesn’t expose all the properties, so you need to extract the original event.
In a couple of spots I replaced
pageX=e.changedTouches[0].pageX;
pageY=e.changedTouches[0].pageY;
with
pageX=e.originalEvent.changedTouches[0].pageX;
pageY=e.originalEvent.changedTouches[0].pageY;
2 Likes
I am trying to use it in a basic ionic app, but in this line:
<img-crop image="myImage" result-image="myCroppedImage"></img-crop>
Never render the image to crop!, in the image property i put a regular url from an image on the internet. Which could be the problem?
After much trouble with js/html-only based cropping (issues with getting correct base64 at add-to/get-from canvas), I’ve successfully used this native plugin:
Use FILE_URL (file path, as opposed to not DATA_URL - base64).
You might then want to get the base64 of the file to send to server.
There’s another thing I had to find there. Some post somewhere pointed out that you need to use the sub path given to actually get at the image data.
Here’s the code for all that:
var options = {
quality: 20,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.CAMERA,
targetWidth: theTargetWidth,
targetHeight: theTargetWidth,
encodingType: Camera.EncodingType.JPEG,
mediaType: 0,
allowEdit: true,
saveToPhotoAlbum: false,
correctOrientation: false,
popoverOptions: CameraPopoverOptions,
cameraDirection: 1
};
$cordovaCamera.getPicture(options).then(function(imageUri) {
// Success! Image data is here
if (dp == "iOS") {
$scope.selfie.image = imageUri;
} else {
//$scope.boosterAddImageToCanvas(imageUri);
$scope.uriToBase64(imageUri).then(function(result) {
console.log('getPicture:uriToBase64:result=' + result);
$scope.selfie.image = result;
$scope.$apply();
});
}
}, function(err) {
// An error occured. Show a message to the user
//alert('getPicture:err='+err);
$rs.trackError(err, "getPicture");
});
$scope.uriToBase64 = function(fileUri) {
var d = $q.defer();
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
function gotFS(fileSystem) {
var fullPath = fileUri;
var relPath = fullPath.replace('file:\/\/\/storage\/emulated\/0\/', '');
// REMOVE UP TO Android
window.resolveLocalFileSystemURI(relPath, winConvert, failConvert);
function winConvert(uri) {
console.log('uriToBase64:winConvert2:uri=' + uri);
}
function failConvert(error) {
console.log('uriToBase64:failConvert:error.code=' + error.code);
d.reject(error);
}
fileSystem.root.getFile(relPath, null, gotFileEntry, fail);
}
function gotFileEntry(fileEntry) {
console.log('uriToBase64:gotFileEntry:fileEntry=' + fileEntry);
fileEntry.file(gotFile, fail);
}
function gotFile(file) {
console.log('gotFile');
readDataUrl(file);
}
function readDataUrl(file) {
var reader = new FileReader();
reader.onloadend = function(evt) {
//console.log('uriToBase64:readDataUrl:evt.target.result='+evt.target.result);
var base64Image = evt.target.result.replace('data:image\/jpeg;base64,', '');
$scope.selfie.image = base64Image;
//console.log('uriToBase64:readDataUrl:$scope.selfie.image='+$scope.selfie.image);
$scope.$apply();
d.resolve(base64Image);
return d.promise;
};
reader.readAsDataURL(file);
}
function fail(error) {
console.log('uriToBase64:fail:error.code=' + error.code);
}
return d.promise;
}
in template .html:
<img style="width:100%;" src="data:image/JPEG;base64,{{selfie.image}}" />ngCrop apper no compatible with touch events, its may sounds not so good when working with Apache cordova.
I’ve forked a version from jr-crop, mine works on android as well as ios.
None of the proposed solutions is working properly for me.
I found this little script that I’m working on adapting for my use: [img-touch-canvas][1]
So far I’ve been able to render an image from the filesystem in it and touch events (pinch-to-zoom and pan) are working wonderfully when tested in ionic-generated apk installed on Samsung Note 3.
All that’s left to do is figure out how to send in an image from the cordova camera and then how to generate a new image from the canvas element once the user has panned and zoomed to their heart’s content.
For anyone interested, here is the directive I’m using:
.directive('imageCanvas', function() {
return {
restrict: 'A',
link: function(scope, element) {
var parentWidth = element[0].parentNode.offsetWidth;
element[0].width = parentWidth;
element[0].height = parentWidth;
var gesturableImg = new ImgTouchCanvas({
canvas: element[0],
path: "img/pablo.png"
});
}
};
});
and here is the relevant html:
<div style="width:100%">
<canvas id="canvas" image-canvas></canvas>
</div>
This produces a static canvas element full width of the screen and the image is automatically rendered at full height or width of the canvas, based on the image’s shortest side.
I hope this is helpful for anyone looking to do something similar.
[1]: https://github.com/rombdn/img-touch-canvas
1 Like
Hi casper123,
Thank you for this, it works pretty good – though I have a couple of questions I’m hoping you can help me with:
-
Is there a way to specify a more obvious border around the cropping area? like a white dotted line or something? I’ve tried adding the style “border-style: dotted” to several elements, but I can’t seem to achieve this and I’m not sure what I’m doing wrong…
-
For some images that I load from the gallery that I’m expecting to be portrait-oriented are being displayed in landscape… is there a way to ensure that portrait photos are shown portrait and the same for landscape? Perhaps by reading the exif?
-
Is there a way to add a rotate button? I added rotate(90deg) to the transform style which works momentarily but then it seems to reset once I try to move the crop selection…
Thank you again for this and I wish I were smart enough to make these changes myself so I could contribute!!
or use
