在 HTML5 画布元素的情况下如何使用 jcrop 插件答案

【问题标题】：How to use jcrop plug-in incase of HTML5 canvas element在 HTML5 画布元素的情况下如何使用 jcrop 插件
【发布时间】：2014-03-01 01:47:02
【问题描述】：

我是这个画布的新手。最近在我的项目中，当用户在服务器上上传图像时，图像正在画布元素上动态预览。现在我想裁剪它的一部分。我使用了 jcrop插件，但不知道如何获得裁剪区域。也感谢任何有关 jcrop 使用的小帮助。

提前致谢

【问题讨论】：

【解决方案1】：

如果你使用 jcrop，你就不必关心画布的东西了。

只需创建这样的图像

<img src="myimage.jpg" id="cropbox" />

剩下的工作由 jcrop 完成。像这样使用它（并添加您需要的选项）：

$('#cropbox').Jcrop();

官方网站上的选项和教程的完整列表：http://deepliquid.com/projects/Jcrop/demos.php

编辑：

如果你有一个要裁剪的画布，那么你不应该使用 JCrop 而是这样：

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

参数 Image 可以是画布对象。然后，要将画布提取到图像，请使用 toDataURL 函数。

【讨论】：

如果我使用的是 canvas 元素，那么该元素的 id 必须用于“cropbox”，因为我不知道在画布上绘制的图像的 id（它是动态上传的服务器并在画布上绘制）。还有一件事我想知道如何获取裁剪的图像部分，以便我可以在其他画布上或在其自身上绘制它。
：非常感谢。按照你上面提到的教程，我按照我的要求得到了一切。
所以你应该把我的回答标记为你关闭话题的解决方案

【解决方案2】：

【讨论】：