ng-croppie







Image

Preview



  ** FIRST, DECLARE IN APP **
  var app = angular.module('myApp', ['ngCroppie']);



  ** IN CONTROLLER **
  app.controller('testController', ['$scope', function($scope) {

    $scope.outputImage = null;
    $scope.inputImage = "path/to/image.png"
    $scope.onUpdate = function(data){
        // runs whenever there's a change
    }

  })



  ** HTML **
  <ng-croppie   src="inputImage"
                ng-model='outputImage'
                update='onUpdate'
                boundry="{w: 500, h: 500}"
                viewport="{w: 300, h:300}"
                mousezoom="true"
                zoom="false"
                type="circle">
  </ng-croppie>

  // image preview
  <img src="{{doubleWrap}}"  </img>