Skip to content

An image cropping tool for AngularJS. Features rectangular crop area, zooming, aspect ratios and multi-touch.

License

Notifications You must be signed in to change notification settings

AllanBishop/angular-img-cropper

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

45 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

angular-img-cropper

An image cropping tool for AngularJS. Features a rectangular crop area. The crop area's aspect ratio can be enforced during dragging. The crop image can either be 1:1 or scaled to fit an area.

Screenshot

Screenshot

Live demo

Live demo on JSBin

Requirements

  • Modern Browser supporting <canvas>

Installing

Download

Or

  • Install with Bower
bower install angular-img-cropper

Add dependency

Add the image cropper module as a dependancy to your application module:

angular.module('myApp', ['angular-img-cropper']);

Options

Parameter Description
crop-width The width of the crop area
crop-height The height of the crop area
image The source image to crop
cropped-image (optional) The cropped image
keep-aspect Enforces that the aspect ratio is kept when dragging the crop area. The aspect ratio is defined by the width and height paramater.
touch-radius The radius for detecting touches/clicks on the corner drag markers and the centre drag marker.
crop-area-bounds (optional) A model that will be automatically updated with the bounds (left, right, top, bottom) of the crop area relative to the original source image.
min-width (optional) The minimum width that the crop area can be set to.
min-height (optional) The minimum height that the crop area can be set to.
cors (optional) Allows images loaded from foreign origins to be used in canvas as if they were being loaded from the current origin (MDN). Default: no

Example usage

Markup example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="angular-img-cropper.min.js"></script>
<script>
    angular.module('myApp', ['angular-img-cropper']);

    angular.module('myApp').controller("ImageCropperCtrl",[ '$scope', function($scope)
    {
        $scope.cropper = {};
        $scope.cropper.sourceImage = null;
        $scope.cropper.croppedImage   = null;
        $scope.bounds = {};
        $scope.bounds.left = 0;
        $scope.bounds.right = 0;
        $scope.bounds.top = 0;
        $scope.bounds.bottom = 0;
    }]);
</script>
<meta charset="utf-8">
<title>Example</title>
</head>
<body ng-app="myApp">
    <div ng-controller="ImageCropperCtrl as ctrl">
        <input type="file" img-cropper-fileread image="cropper.sourceImage" />
        <div>
             <canvas width="500" height="300" id="canvas" image-cropper image="cropper.sourceImage" cropped-image="cropper.croppedImage" crop-width="400" crop-height="200" keep-aspect="true" touch-radius="30" crop-area-bounds="bounds"></canvas>
        </div>
        <div>Cropped Image (Left: {{bounds.left}} Right: {{bounds.right}} Top: {{bounds.top}} Bottom: {{bounds.bottom}})</div>
        <div ng-show="cropper.croppedImage!=null"><img ng-src="{{cropper.croppedImage}}" /></div>
    </div>
</body>
</html>

License

See the LICENSE file.

About

An image cropping tool for AngularJS. Features rectangular crop area, zooming, aspect ratios and multi-touch.

Resources

License

Stars

Watchers

Forks

Packages

No packages published