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://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
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 stepfit-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.zoomIn(3);
api.zoomOut(2);
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 negativezoomIn
function Apply the zoomIn givenzoomOut
function Apply the zoomOut givenremove
function Remove the cropper
The MIT License (MIT)