Natural Performance Manager

    angular-image-cropper

    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.

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

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

    Usage

    Load the required files

    Using modules

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

    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:

    <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"
      width="640"
      height="480"
      show-controls="true"
      fit-on-init="false"
      center-on-init="true"
      api="getApiFunction"
      crop-callback="myCallbackFunction"
      check-cross-origin="false"
      zoom-step="0.1"
      action-labels="myButtonLabelsObject"
    ></image-cropper>

    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
    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.
    }

    Api

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

    Install

    npm i angular-image-cropper

    DownloadsWeekly Downloads

    60

    Version

    1.2.0

    License

    MIT

    Last publish

    Collaborators

    • bcabanes