A better way to crop images client-side using AngularJS

Over the weekend I attempted to make a self-contained AngularJS Directive which will allow you to crop an image before it's uploaded to the server. My aim was to make it mobile-friendly, and smooth and intuitive to interact with.

Traditional image croppers involve drawing rectangular bounds with a flexible frame, but I wanted it to feel more draggable with touch gestures.

Features

• Touch support, swipe to move and drag handle to zoom.
• Add any image file from your device/machine.
• Output as a base64-encoded data uri.
• Uses HTML5 Canvas to display image in a flexible context, to allow dragging and zooming.
• Note that regardless of the shape of the cropping guideline, resulting images will be square. For example, using the 'circle' shape parameter will show a circular guide, but the resulting images will have to be masked when rendering to the user.

Download

Browser Support

IE10+, Android 3+, iOS 6+, basically all modern browsers!

Cmon, what did you expect? Oh, and any requests to get this working in IE9 and below will be filed away in my 'special' folder.

Usage

• Include the directive
• Include the styles
• Initiatlise the directive see standalone JSBin for example code.

Example markup for including the directive

<image-crop
 data-width="300"
 data-height="300"
 data-shape="circle"
 data-result="imageCropResult"
 data-step="imageCropStep"
></image-crop>

* Note that the last 2 parameters shown must exist as variables in the scope of the controller.

Parameters

• width (string) - the width of the cropper
• height (string) - the height of the cropper
• shape (string) - the cropping guideline shape (circle/square)
• result (bound string) - the variable which will have the resulting data uri bound to it
• step (bound integer) - the variable which dictates which step the user will see (used for resetting purposes)

Known Issues

• Currently not working with images captured on some mobile devices, due to orientation exif data being used in mobile browsers. Other images on mobiles, including downloaded images are working fine. This should be fixed soon!

Please help me improve this module :-)

I developed this module for a responsive app I'm building, as I couldn't find any decent alternatives. Now I've bashed out v1 over a weekend, I'm planning for world domination, and I can't do it without your help!

I'd be really grateful for constructive feedback and feature suggestions!