How to crop image in android as well as ios?

tutorials
19

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