javascript - jCrop HTML5 Canvas Base64

Question

我正在尝试使用 jCrop 和 canvas。

我没有将图像发送到服务器并使用裁剪后的图像再次返回，而是尝试使用 Canvas 直接裁剪它，因为结果是我将裁剪转换为 Base64 图像并发送到服务器。

我有an example JSFiddle .

我裁剪图像，然后在 Canvas 中进行转换，但无法在 Base64 中转换图像。出现以下错误:

"SecurityError: The operation is insecure."

我已经尝试过..

console.log(canvas.toDataURL());

我做错了什么？

Answer 1

一般来说，这个问题是由于 CORS (跨源资源共享)要求未得到满足。

要避免这种情况，您可以:

• 提供从与页面相同的来源裁剪的图像
• 通过向图像提供 crossOrigin 属性来请求跨域使用
• 使用代理通过您的服务器从外部站点提供图像(在这种情况下，在本地执行所有操作都会失去很多意义)。

此外:

• 测试时，不要使用本地 file:// 协议(protocol)，而是使用轻型本地服务器(即 Mongoose )

否则，每次使用 toDataURL(或 getImageData)时，您都会收到安全错误。

关于从外部服务器请求使用 CORS:您只能请求此类使用，但是否授予权限取决于服务器。

要请求:

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

或来自 JavaScript:

var img = new Image;

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

如果被拒绝，图像将根本无法加载。