Need help with angular-image-cropper?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

bcabanes
123 Stars 66 Forks 101 Commits 24 Opened issues

Description

AngularJS directive for cropping images.

Services available

!
?

Need anything else?

Contributors list

travis codecov version downloads MIT License semantic-release Commitizen friendly

NOT MAINTAINED ANYMORE

Angular image cropper

Live example

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

Description

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

Installation

Using NPM

npm install angular-image-cropper

Using Bower (not recommended)

bower install https://unpkg.com/angular-image-cropper/bower.zip

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

bash
bower install https://unpkg.com/[email protected]/bower.zip --save

Usage

Load the required files

Using modules

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

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

Using script tags

Just import the

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

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

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

The directive


Options

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
javascript
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
javascript
vm.myButtonLabels = {
  rotateLeft: ' (rotate left) ',
  rotateRight: ' (rotate right) ',
  zoomIn: ' (zoomIn) ',
  zoomOut: ' (zoomOut) ',
  fit: ' (fit) ',
  crop: ' [crop] ' // You can pass html too.
}

Api

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

javascript
// Cropper API available when image is ready.
vm.getCropperApi = function(api) {
  api.zoomIn(3);
  api.zoomOut(2);
  api.rotate(270);
  api.fit();
  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

License

The MIT License (MIT)

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.