ng-jcrop
Angular directive to jCrop jQuery plugin
Demo
http://andrefarzat.github.io/ng-jcrop/
Installing
Install via bower or npm
bower install ng-jcrop --save
# or
npm install ng-jcrop --saveIt 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>Usage
// 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
<script>
var app = angular.module('yourModule', ['ngJcrop']);
// Optional configuration via ngJcropConfigProvider
app.config(function(ngJcropConfigProvider){
// [optional] To change the jcrop configuration
// All jcrop settings are in: http://deepliquid.com/content/Jcrop_Manual.html#Setting_Options
ngJcropConfigProvider.setJcropConfig({
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
ngJcropConfigProvider.setPreviewStyle({
'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;
});
</script>
<!-- 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 installThen you can run the tests
npm testStarting the demo page
It is necessary install the http-server
npm installThen you run npm start and access http://localhost:8080/demo/
FAQ
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
