如何使用jcrop插件incase of HTML5 canvas元素

我是新来的这个canvas stuff.recently在我的项目中，当用户上传图片到服务器上时，图片在canvas元素上动态预览。现在我想要裁剪它的一部分。我使用jcrop插件，但不知道如何获得裁剪区域。对jcrop使用的任何小帮助也表示赞赏。如何使用jcrop插件incase of HTML5 canvas元素

在此先感谢

来源

2012-05-02 Sarita

如果您使用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)

illustration of the drawImage parameters

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

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

来源

2012-05-02 07:03:57 jazzytomato

如果我使用的不是该元素的ID的canvas元素必须在“裁剪框”。安迪被用作I不知道在画布上绘制的图像的id（它在服务器上动态上传并在画布上绘制）。还有一件事我想知道如何获取裁剪后的图像部分，以便我可以绘制其他一些画布或本身。 – Sarita

我编辑了我的答案 – jazzytomato

：非常感谢。根据我的要求，我按照上面提到的教程得到了一切。 – Sarita

jcrop帆布完整的文档看起来非常有前途：https://github.com/andrewlin12/jcrop-canvas

来源

2012-05-28 12:06:53 BrianFreud

如何使用jcrop插件incase of HTML5 canvas元素

回答

相关问题