Simple image select, crop and draw Angular directive.
JavaScript HTML CSS
Latest commit 361e5e1 Mar 4, 2016 @maxiruani Merge pull request #8 from talzag/master
Fix for IE 11

README.md

MR-IMAGE

Simple image select, crop and draw Angular.js directive.

Features:

  • Lightweight. Just 7.68 Kb .js + 2.79 Kb .css = 10.47 Kb minified.
  • Native. No need of jQuery.
  • Customizable style.
  • Make image selection and get coordinates.
  • Crop images.
  • Draw squares on image.
  • Aspect ratio.

Screenshots:

Selector

Drawer

Installation

Installation is easy, MR-IMAGE has minimal dependencies - only AngularJS is required.

Install with Bower

$ bower install mr-image

Demo

Do you want to see the directive in action? Visit http://maxiruani.github.io/mr-image/

Adding dependency to your project

When you are done downloading all the dependencies and project files the only remaining part is to add dependencies on the mrImage AngularJS module:

angular.module('myModule', ['mrImage']);

Example

<div mr-image mr-src="image.src" mr-max-width="image.maxWidth"
     mr-selector="selector" mr-drawer="drawer"></div>

<img ng-src="{{cropResult}}">
var app = angular.module('DemoApp', ['mrImage']);

    app.controller('DemoCtrl', ['$scope', function ($scope) {

        $scope.image = {
            src: 'assets/times.jpg',
            maxWidth: 938
        };

        $scope.selector = {};

        $scope.drawer = [
            { x1: 625, y1: 154, x2: 777, y2: 906, color: '#337ab7', stroke: 1 },
            { x1: 778, y1: 154, x2: 924, y2: 906, color: '#3c763d', stroke: 1 },
            { x1: 172, y1: 566, x2: 624, y2: 801, color: '#a94442', stroke: 1 }
        ];

        $scope.addRect = function () {
            $scope.drawer.push({
                x1: $scope.selector.x1,
                y1: $scope.selector.y1,
                x2: $scope.selector.x2,
                y2: $scope.selector.y2,
                color: '#337ab7',
                stroke: 1
            });
            $scope.selector.clear();
        };

        $scope.cropRect = function () {
            $scope.cropResult = $scope.selector.crop();
        };

    });

Directive

mr-src

Image source. URL.

mr-max-width

Optional. Max width of image. The image will scale to adjust.

mr-aspect-ratio

Optional. Decimal. Aspect ratio of w/h (e.g. 1 for square).

mr-selector

Selector Object
Properties
x1 Coordinate x1
y1 Coordinate y1
x2 Coordinate x2
y2 Coordinate y2
enabled Default: true
Methods
.clear() Clear the selection
.crop() Crop the selection, returns image as data url

mr-drawer

Drawer Array
Array Item Object
x1 Coordinate x1
y1 Coordinate y1
x2 Coordinate x2
y2 Coordinate y2
color Color of border and background. Example: #333
stroke Border stroke. Number. Example: 1

License

See the LICENSE file.

Author: Maximiliano Ruani