javascript - jCrop HTML5 Canvas Base64

Question

我正在尝试使用jCropand 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

我遇到了这个问题。问题是当你的画布上已经有东西了，然后在上面放了其他东西，它就会被污染。我的解决方法是删除画布元素并替换它，然后在其上放置一个新图像。