使用AngularJS进行图像裁剪

Question

我想让用户裁剪图像,我找到了这个JQuery插件 - http://deepliquid.com/content/Jcrop.html

我尝试将它与Angular-ui的Jquery passthrough选项一起使用,将ui-jq=Jcrop指令添加到<img>

问题是如果我使用ng-src动态更改图像它不起作用,看不到任何东西.如果我将其更改为src并放置一个静态URL我可以看到图像和Jcrop.

我该如何解决这个问题？另外,我怎样才能听Jcrop的回调知道用户的选择是什么？

是否有更好/更简单的方法将图像裁剪功能添加到AngularJS？

Answer 1

这是我的解决方案:

我写了一个指令,创建img元素并在其上应用插件.当src被更改时,这个img被删除,插件创建的内容也被破坏,然后用新的src重新创建新的img并再次应用插件.

还提供了"选定"回调,以便能够进行选择的协调(包装在$ apply中,以便您可以修改其中的范围值).

在Plunker检查我的解决方案

Answer 2

我在这里使用AngularJS和Jcrop构建了一个演示:

演示:https://coolaj86.github.com/angular-image-crop

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