angularjs-cropper
v1.0.0
Published
An angularjs module for selecting and taking screenshot. The module is created based on croperjs by fengyuanchen
Downloads
179
Readme
ngCropper
An AngularJS module for https://github.com/fengyuanchen/cropper jQuery plugin.
Install
bower install angularjs-cropper
npm install angularjs-cropperUsage
<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.