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 --save
It depends of angular, jquery and jquery-jcrop, so it is necessary including all libraries
Usage
// add 'ngJcrop' as dependency to your modulevar yourModule = angular;
And add the ng-jcrop
directive in an <div>
giving the
image's src as the value
<!-- Using the default configuration --> <!-- Using configuration name 'anotherConfig' -->
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/
FAQ
#37)
1. How to get the source of a selected image? (related issue:Once the user selects an image, the $rootScope
broadcasts the JcropChangeSrc
event passing
the image (as dataURL) and the configName
. Example:
$scope;
ng-jcrop uses FileReader.readAsDataURL
to load the image.
#64)
2. How to get the real coords to replicate the selection? (related issue: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
:
You can see a better example at the demo page