ng-jscrop | Angular-js directive to easily crop images

ng-jcrop directive


Stars : 10

Forks : 10

Created by André Farzat

bower install ng-jcrop

Demo Download GitHub

Build Status Coverage Status Code Climate David dm


Angular directive to jCrop jQuery plugin



Install via bower or npm

bower install ng-jcrop --save
# or
npm install ng-jcrop --save

It depends of angular, jquery and jquery-jcrop, so it is necessary including all libraries

<link rel="stylesheet" href="bower_components/jcrop/css/jquery.Jcrop.css" />

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jcrop/js/jquery.Jcrop.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/ng-jcrop/ng-jcrop.js"></script>


// add 'ngJcrop' as dependency to your module
var yourModule = angular.module("yourModule", ['ngJcrop']);

And add the ng-jcrop directive in an <div> giving the image's src as the value


var app = angular.module('yourModule', ['ngJcrop']);

// Optional configuration via ngJcropConfigProvider

    // [optional] To change the jcrop configuration
    // All jcrop settings are in:
        bgColor: 'black',
        bgOpacity: .4,
        aspectRatio: 16 / 9

    // [optional] A configuration can have a name as its first parameter,
    // so you can have multiple configurations in the same app
    ngJcropConfigProvider.setJcropConfig('anotherConfig', {
        bgColor: 'white',
        bgOpacity: .2,
        aspectRatio: 4 / 3

    // [optional] To change the css style in the preview image
        'width': '100px',
        'height': '100px',
        'overflow': 'hidden',
        'margin-left': '5px'


app.controller('SomeController', function($scope){
    $scope.obj = {}

    // The url or the data64 for the image
    $scope.obj.src = 'beautifulImage.jpg';

    // Required: The current selection coords. Must be [x, y, x2, y2, w, h]
    $scope.obj.selection = [100, 100, 200, 200, 100, 100];

    // Optional: The coords of the selection related to the screen.
    // Use this to debug or in case you need to store the current "screen" value to replicate the same selection later
    $scope.obj.coords = [];

    // You can add a thumbnail if you want
    $scope.obj.thumbnail = true;

<!-- Using the default configuration -->
<div ng-jcrop="obj.src" selection="obj.selection" thumbnail="obj.thumbnail"></div>

<!-- Using configuration name 'anotherConfig' -->
<div ng-jcrop="obj.src" ng-jcrop-config-name="anotherConfig" selection="obj.selection" thumbnail="obj.thumbnail"></div>

### Testing

It is necessary install `karma` and its dependencies
npm install

Then you can run the tests

npm test

Starting the demo page

It is necessary install the http-server

npm install

Then you run npm start and access http://localhost:8080/demo/


1. How to get the source of a selected image? (related issue: #37)

Once the user selects an image, the $rootScope broadcasts the JcropChangeSrc event passing the image (as dataURL) and the configName. Example:

$scope.$on('JcropChangeSrc', function(ev, src, configName){
    $scope.imageSrc = src; // the image as dataURL

ng-jcrop uses FileReader.readAsDataURL to load the image.

2. How to get the real coords to replicate the selection? (related issue: #64)

It was added the coords attribute to make it possible to access the "real" coords of the selection. "Real" means the selection coords you see on the screen NOT the selection coords which is in selection attribute which is the coords already with the aspect ratio computed.

Use like this to access the coords:

<div ng-jcrop="obj.src" selection="obj.selection" thumbnail="obj.thumbnail" coords="obj.coords"></div>

You can see a better example at the demo page


Javascript plugin