jquery - 用“cropper”裁剪图像 - 在画布中

Posted 2023-02-25

【中文标题】jquery - 用“cropper”裁剪图像 - 在画布中

【英文标题】：jquery - crop image with "cropper" - in canvas

【发布时间】：2015-11-11 10:50:46

【问题描述】：

我正在尝试实现https://github.com/fengyuanchen/cropper 插件。我已经用 bootstrap 实现了它，我正在尝试让它让用户可以按下“裁剪按钮”，并且用户只会看到图像的裁剪部分 - 在图像内部。该演示使用模态框和这行代码：

 $('#getCroppedCanvasModal').modal().find('.modal-body').html(result);

这将显示找到打开一个模态并将结果图像（结果）作为 html 放在模态正文中。然后用户可以正常关闭并继续。我想达到同样的效果——除了没有模态框。这种方法不起作用，因为它覆盖了所有的 html 代码并且插件不再起作用。我想我可能不得不用结果替换源图像本身。有什么解决办法吗？

【参考方案1】：

您的原始图像必须位于 div 等容器元素中。您可以使用$("thedivId") 选择此div，并在此div 上调用html(result)。

【讨论】：

它确实得到了裁剪的部分，但是在这之后就不能对图像进行任何其他操作了

这些其他操作是什么？

F.ex 撤消、清除、旋转。他们使用 src 图像和图像 id 来指向图像并执行这些操作。

因此您可以将结果图像的DOM-Id 更改为原始图像的旧ID。

您可以将原始图像替换为结果，因此结果应该是 DOM-Image-Node