Angular Image Crop
I'm attempting to make a self-contained AngularJS Directive which will allow you to crop an image before it's uploaded to the server.
Features
- Touch support, swipe to move and drag handle to zoom - see known issues
- 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.
Browser Support
- IE10+, Android 3+, iOS 6+, basically all modern browsers!
Usage
- Add the dependency :
angular.module('myApp',['ImageCropper']) - Include the stylesheet
- Initiatlise the directive see standalone JSBin for example code.
Parameters
- width (string) - the width of the cropper
- height (string) - the height of the cropper
- padding (integer) - space, in pixels, rounding the shape
- max-size (integer) - max size of the image, in pixels
- shape (string) - the cropping guideline shape (circle/square)
- step (bound integer) - the variable which dictates which step the user will see (used for resetting purposes)
- src (bound Blob or base64 string) - scope variable that will be the source image for the crop
- result (bound string) - the variable which will have the resulting data uri bound to it
- result-blob (bound Blob) - the variable which will have the resulting data as a Blob object
- crop (bound boolean) - scope variable that must be set to true when the image is ready to be cropped
Example markup
<image-crop
data-height="200"
data-width="150"
data-shape="square"
data-step="imageCropStep"
src="imgSrc"
data-result="result"
data-result-blob="resultBlob"
crop="initCrop"
padding="250"
max-size="1024"
></image-crop> 
