jCrop HTML5 Canvas Base64

Posted 2023-02-25

【中文标题】jCrop HTML5 Canvas Base64

【英文标题】：

【发布时间】：2013-10-30 18:10:17

【问题描述】：

我正在尝试使用 jCrop 和 canvas。

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

我有an example JSFiddle。

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

"SecurityError: The operation is insecure."

我试过了..

console.log(canvas.toDataURL());

我做错了什么？

【参考方案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 = '...';

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

【参考方案2】：

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