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中，以便您可以在其中修改范围值）。

检查my solution at Plunker

Answer 2

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

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

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

Answer 3

您可以利用ui-event创建一个事件定义对象，其中键是事件名称，值是回调。或者您可以将这些事件作为选项传递给Jcrop（according to the documentation）

最后，有a new update来ui-jq，可以添加ui-refresh，这是一个需要重新触发插件的表达式。

理论上你应该能够做到

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

注意：这只是再次重新启动直通，并不会自动意味着这将解决问题或重新初始化时插件的行为正常

我们仍在努力让您在不同时间触发不同的事件。

使用AngularJS进行图像裁剪

3 个答案: