Image crop with AngularJS

Question

I want to let the user crop an image, I found this JQuery plugin - http://deepliquid.com/content/Jcrop.html

I tried to use it with Angular-ui's Jquery passthrough option, adding the ui-jq=Jcrop directive to the <img>

The problem is that If I use ng-src to dynamically change the image it doesn't work and nothing is seen. If I change it to src and put a static url I can see the image and Jcrop.

how can I fix that ? also, how can I listen to Jcrop's callbacks to know what is the user's selection ?

is there a better / simpler way to add image cropping functionality to AngularJS ?

Answer 1

Here is my solution:

I've written a directive that create img element and apply plugin on it. When src is changed, this img is removed and content that was created by plugin is also destroyed and then re-created new img with new src and again applied plugin on it.

Also provided 'selected' callback to be able to get coordinated that were selected (wrapped in $apply so you can modify your scope values in it).

Check my solution at Plunker

Answer 2

I've built a demo using AngularJS and Jcrop here:

Demo: https://coolaj86.github.com/angular-image-crop

On Github: https://github.com/coolaj86/angular-image-crop

Answer 3

You can leverage ui-event to create an event definition object with the keys being the event names and the values being the callbacks. Or you can simply pass these events as options to Jcrop (according to the documentation)

Finally, there is a new update coming to ui-jq that lets you add ui-refresh which is an expression to be watched to re-trigger the plugin.

Theoretically you should be able to do

<img ui-jq="Jcrop" 
     ui-options="{onSelect:myCallback}"
     ui-event="{onChange:'myCallback($event)'}"
     ui-refresh="imgSrc"
     ng-src="imgSrc" />

Note: this simply re-fires the passthrough again, and doesn't automatically mean this will fix the problem or that the plugin will behave properly when re-initialized

We're still working on a good way to allow you to trigger different events at different times.