Angularjs-cropper NPM

ngCropper

An AngularJS module for https://github.com/fengyuanchen/cropper jQuery plugin.

Install

bower install angularjs-cropper
npm install angularjs-cropper

Usage

<link href="./angularjs-cropper.all.css" rel="stylesheet">
<script src="./angularjs-cropper.all.js"></script>

angular.module('demo', ['angularJsCropper'])
.controller('CropperController', function($scope, $timeout, Cropper) {
  var file, data;

  /**
   * Method is called every time file input's value changes.
   * Because of Angular has not ng-change for file inputs a hack is needed -
   * call `angular.element(this).scope().onFile(this.files[0])`
   * when input's event is fired.
   */
  $scope.onFile = function(blob) {
    Cropper.encode((file = blob)).then(function(dataUrl) {
      $scope.dataUrl = dataUrl;
      $timeout(showCropper);  // wait for $digest to set image's src
    });
  };

  /**
   * Croppers container object should be created in controller's scope
   * for updates by directive via prototypal inheritance.
   * Pass a full proxy name to the `ng-cropper-proxy` directive attribute to
   * enable proxing.
   */
  $scope.cropper = {};
  $scope.cropperProxy = 'cropper.first';

  /**
   * When there is a cropped image to show encode it to base64 string and
   * use as a source for an image element.
   */
  $scope.takeScreenShot = function() {
    if (!file || !data) return;
    Cropper.crop(file, data).then(Cropper.encode).then(function(dataUrl) {
      ($scope.screenShot || ($scope.screenShot = {})).dataUrl = dataUrl;
    });
  };

  /**
   * Use cropper function proxy to call methods of the plugin.
   * See https://github.com/fengyuanchen/cropper#methods
   */
  $scope.clear = function(degrees) {
    if (!$scope.cropper.first) return;
    $scope.cropper.first('clear');
  };

  /**
   * Object is used to pass options to initalize a cropper.
   * More on options - https://github.com/fengyuanchen/cropper#options
   */
  $scope.options = {
    maximize: true,
    aspectRatio: 2 / 1,
    crop: function(dataNew) {
      data = dataNew;
    }
  };

  /**
   * Showing (initializing) and hiding (destroying) of a cropper are started by
   * events. The scope of the `ng-cropper` directive is derived from the scope of
   * the controller. When initializing the `ng-cropper` directive adds two handlers
   * listening to events passed by `ng-cropper-show` & `ng-cropper-hide` attributes.
   * To show or hide a cropper `$broadcast` a proper event.
   */
  $scope.showEvent = 'show';
  $scope.hideEvent = 'hide';

  function showCropper() { $scope.$broadcast($scope.showEvent); }
  function hideCropper() { $scope.$broadcast($scope.hideEvent); }

});

<body ng-controller="CropperController">

  <input type="file" onchange="angular.element(this).scope().onFile(this.files[0])">
  <button ng-click="takeScreenShot()"> Take screen shot</button>
  <button ng-click="clear()">Clear selection</button>

  <br />

  <div ng-if="dataUrl" class="img-container">
    <img ng-if="dataUrl" ng-src="{{dataUrl}}" width="800"
         angular-js-cropper
         angular-js-cropper-proxy="cropperProxy"
         angular-js-cropper-show="showEvent"
         angular-js-cropper-hide="hideEvent"
         angular-js-cropper-options="options">
  </div>

  <div class="preview-container">
    <img ng-if="screenShot.dataUrl" ng-src="{{screenShot.dataUrl}}">
  </div>

</body>

Read Demo code for detailed example.

API

Look at demo.js to learn workflow.

angularjs-cropper

@everything-registry/sub-chunk-1139 @infinitebrahmanuniverse/nolb-angularj @zalastax/nolb-angularj

1.0.0

4 years ago