angular-img-cropper-nonmin1

Client side image cropper directive for AngularJS (rectangular area, aspect ratio, multi-touch)


Keywords
angular, cropper, image, img, rectangle, aspect, crop
License
MIT
Install
bower install angular-img-cropper-nonmin1

Documentation

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.