A touch-compatible image cropper, allowing you to drag, zoom and crop images before uploading them to the server.
3 people use it
Author: 274326? andyshora

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.


  • 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!


  1. Include the directive
  2. Include the stylesheet
  3. Initiatlise the directive see standalone JSBin for example code.


  • 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)

Example markup

See a standalone working example

Working example on JSBin

Step 1. Choose image, drag to move and drag corner handle to zoom

Choose image

Step 2. Produces a result as a base64-encoded data uri

Choose image

Known Issues

  1. Currently not working with images captured on some mobile devices, due to orientation exif data being used mobile browsers. Other images on mobiles, including downloaded images are working fine.
comments powered by Disqus
This page was last updated over 4 years ago.