1.2.0 • Public • Published

travis codecov version downloads MIT License semantic-release Commitizen friendly

Angular image cropper

Live example

To see a live example, go to the demo's page.


Angular image cropper is inspired of the popular Guillotine jQuery plugin that allows to drag, zoom or rotate an image to select a cropping area. Like selecting the display area of a profile picture or avatar.

  • Responsive: The window (or selection area) is fully responsive (fluid)
  • Touch support: Dragging the image also works on touch devices
  • API: Provide an API to do more action with code
  • No needs of jQuery: Written in pure javascript


Using NPM

npm install angular-image-cropper

Using Bower (not recommended)

bower install

Or if you want to install a specific version (e.g: for 1.1.4):

bower install --save


Load the required files

Using modules

Just require the module when you declare your module's dependencies:

var angular = require('angular');
  .module('myApp', [require('angular-image-cropper')])

Using script tags

Just import the angular-image-cropper javascript file in your index.html:

<script src="/path/to/angular-image-cropper.js"></script>

Add the module as dependency to your main application module like this:

angular.module('myApp', ['imageCropper']);

The directive

<image-cropper image-url="myImageUrlOrBase64"


Angular image cropper comes with some options to simplify your development:

  • image-url string Source image that will be cropped, can be an URL or base64
  • width string Width of the cropped image
  • height string Height of the cropped image
  • zoom-step string Zoom step
  • fit-on-init boolean Fit the image on cropper initialization (keep the ratio)
  • center-on-init boolean Center the image on cropper initialization
  • show-controls boolean Display or not the control buttons (true by default)
  • check-cross-origin boolean Enable cross origin or not
  • crop-callback function Function executed with base64 cropped image as argument when when crop control is clicked
vm.updateResultImage = function(base64) {
  vm.resultImage = base64;
  $scope.$apply(); // Apply the changes.
  • api function Function executed with cropper's API as argument
  • action-labels object Give you the ability to customize button labels by passing an object like
vm.myButtonLabels = {
  rotateLeft: ' (rotate left) ',
  rotateRight: ' (rotate right) ',
  zoomIn: ' (zoomIn) ',
  zoomOut: ' (zoomOut) ',
  fit: ' (fit) ',
  crop: ' <span class="fa fa-crop">[crop]</span> ' // You can pass html too.


Angular image cropper gives you access to the api, you can see an example here:

// Cropper API available when image is ready.
vm.getCropperApi = function(api) {
  vm.resultImage = api.crop();
  • crop function return the cropped image in base64
  • fit function fit the image to the wrapper dimensions (keep the ratio)
  • rotate function Apply the rotation with degrees given, should be a modulo of 90 (90, 180, 270, 360), can be negative
  • zoomIn function Apply the zoomIn given
  • zoomOut function Apply the zoomOut given
  • remove function Remove the cropper


The MIT License (MIT)

Package Sidebar


npm i angular-image-cropper

Weekly Downloads






Last publish


  • bcabanes