To see a live example, go to the demo's page.
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
Using NPM
npm install angular-image-cropper
Using Bower (not recommended)
bower install https://npmcdn.com/angular-image-cropper/bower.zip
Or if you want to install a specific version (e.g: for 1.1.4):
bower install https://npmcdn.com/angular-image-cropper@1.1.4/bower.zip --save
Just require the module when you declare your module's dependencies:
var angular = require('angular');
angular
.module('myApp', [require('angular-image-cropper')])
.controller(/*...*/);
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']);
<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>
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 base64width
string Width of the cropped imageheight
string Height of the cropped imagezoom-step
string Zoom step, must be0 < zoomStep < 1
(0.1 is 10%)fit-on-init
boolean Fit the image on cropper initialization (keep the ratio)center-on-init
boolean Center the image on cropper initializationshow-controls
boolean Display or not the control buttons (true
by default)check-cross-origin
boolean Enable cross origin or notcrop-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 argumentaction-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.
}
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.zoom(3);
api.rotate(270);
api.fit();
vm.resultImage = api.crop();
};
crop
function return the cropped image inbase64
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 negativezoom
function Apply the zoom given, can be negative (fit the image if zoomOut factor is too high)remove
function Remove the cropper
The MIT License (MIT)