Simple Touch-Enabled Image Cropping Directive For AngularJS

Author: oulafen
Views Total: no views
Official Page: Go to website
Publish Date: December 30, 2014
License: MIT


This is 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
  • 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.


Angular Image Crop Image Crop & Zoom

Image Crop & Zoom

Angular Image Crop Cropped Image & Base64 Data

Cropped Image & Base64 Data

You Might Be Interested In:

Add Comment