angular-image-cropper

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.

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

Using Bower (not recommended)

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 <script src="/path/to/angular-image-cropper.js"></script>

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, must be 0 < zoomStep < 1 (0.1 is 10%) * 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 * button-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: ' <span class="fa fa-crop">[crop]</span> ' // 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.zoom(3); 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 * zoom function Apply the zoom given, can be negative (fit the image if zoomOut factor is too high) * remove function Remove the cropper

License

The MIT License (MIT)

comments powered by Disqus
This page was last updated over 1 year ago.