9

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

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

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

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

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

4

3 回答 3

9

这是我的解决方案：

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

还提供了 'selected' 回调，以便能够协调选择的内容（包装在 $apply 中，以便您可以修改其中的范围值）。

在 Plunker检查我的解决方案

于 2013-01-14T16:58:54.493 回答
6

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

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

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

于 2014-05-12T15:15:10.127 回答
1

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

最后，还有一个新的更新，ui-jq让您可以添加ui-refresh一个表达式，以重新触发插件。

理论上你应该能够做到

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

注意：这只是再次重新触发直通，并不意味着这将解决问题或插件在重新初始化时将正常运行

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

于 2013-01-15T00:07:34.913 回答