使用 AngularJS 裁剪图像

Question

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

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

问题是，如果我使用 ng-src 来动态更改图像，它就不起作用并且什么也看不到。如果我将其更改为 src 并放置一个静态 url，我可以看到图像和 Jcrop。

我该如何解决？ 另外，我怎样才能听 Jcrop 的回调来知道用户的选择是什么？

有没有更好/更简单的方法向 AngularJS 添加图像裁剪功能？

Answer 1

这是我的解决方案：

我已经编写了一个指令来创建 img 元素并在其上应用插件。当 src 改变时，这个 img 被删除，插件创建的内容也被销毁，然后用新的 src 重新创建新的 img 并再次在其上应用插件。

还提供了 'selected' 回调，以便能够协调选择的内容（包装在 $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" />

注意：这只是重新启动 passthrough，并不意味着这会自动解决问题或插件在重新初始化时会正常运行

我们仍在研究一种允许您在不同时间触发不同事件的好方法。