jCrop HTML5 Canvas Base64

Question

我正在尝试使用jCrop和canvas 。

我尝试使用画布而不是将图像发送到服务器再通过裁剪的图像再次返回，而是尝试使用画布直接对其进行裁剪，因为结果是将裁剪的图像转换为base64图像并发送到服务器。

我有一个JSFiddle示例 。

我裁剪图像，然后在画布中进行转换，但无法在base64中进行图像转换。 出现以下错误：

"SecurityError: The operation is insecure."

我试过了..

console.log(canvas.toDataURL());

我究竟做错了什么？

Answer 1

通常，此问题是由于未满足CORS （跨域资源共享）要求引起的。

为避免这种情况，您可以：

• 提供与页面来源相同的裁剪图像
• 通过向图像提供crossOrigin属性来请求跨域使用
• 使用代理通过服务器从外部站点提供映像（在这种情况下，很多事情都在本地执行中丢失了）。

此外：

• 测试时，请勿使用本地file://协议，而应使用轻量级的本地服务器（例如Mongoose ）

如果不是这样，则每次使用toDataURL （或getImageData ）时都会收到安全错误。

关于从外部服务器请求CORS的使用：您只能请求这种使用，但是由服务器决定是否授予许可。

要请求：

<img src="..." crossOrigin="anonymous" >

或通过JavaScript：

var img = new Image;

img.onload = handleOnLoad;
img.crossOrigin = 'anonymous';
img.src = '...';

如果拒绝，则根本不会加载图像。

Answer 2

我有这个问题。 问题是当您已经在画布上放置了某些东西，然后在其上放置了其他东西时，它就会变脏。 我的解决方法是删除canvas元素并替换它，然后在其上放置一个新图像。