如何在HTML5 canvas元素的情况下使用jcrop插件

Question

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

提前致谢

Answer 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)

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

mozilla MDN https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images

提供的完整文档

Answer 2

jcrop-canvas看起来很有前途：https://github.com/andrewlin12/jcrop-canvas