JarCasting
NOT MAINTAINED ANYMORE
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/[email protected]/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-urlstring Source image that will be cropped, can be an URL or base64widthstring Width of the cropped imageheightstring Height of the cropped imagezoom-stepstring Zoom stepfit-on-initboolean Fit the image on cropper initialization (keep the ratio)center-on-initboolean Center the image on cropper initializationshow-controlsboolean Display or not the control buttons (trueby default)check-cross-originboolean Enable cross origin or notcrop-callbackfunction 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.
};
apifunction Function executed with cropper's API as argumentaction-labelsobject 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();
};
cropfunction return the cropped image inbase64fitfunction fit the image to the wrapper dimensions (keep the ratio)rotatefunction Apply the rotation with degrees given, should be a modulo of 90 (90, 180, 270, 360), can be negativezoomInfunction Apply the zoomIn givenzoomOutfunction Apply the zoomOut givenremovefunction Remove the cropper
License
The MIT License (MIT)