jCrop HTML5画布Base64

Question

我正试着和jCrop和canvas合作。

与其将图像发送到服务器，然后再用裁剪后的图像返回，我尝试使用画布直接对其进行裁剪，因为结果是，我在base64图像中转换裁剪并发送到服务器。

我有一个例子JSFiddle。

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

"SecurityError: The operation is insecure."

我试过..。

console.log(canvas.toDataURL());

我做错了什么？

Answer 1

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

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

• 提供从与页面相同的来源裁剪的图像。
• 通过向图像提供crossOrigin属性请求跨源使用
• 使用代理通过您的服务器从外部站点服务映像(在这种情况下，大部分的点丢失了，在本地完成所有事情)。

此外：

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

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

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

请求下列任何一项：

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

或者来自JavaScript：

var img = new Image;

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

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

Answer 2

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