Javascript 在客户端将画布html5裁剪为base64，而不使用服务器端代码

我有一个像这样的图像源，没有FileReader对象

我只需要使用客户端JavaScript从不同的域裁剪这个图像

当我试图从canvas（canvas.toDataURL（））获取源代码时，我遇到了一个安全错误（不安全操作）

总之：

有没有办法避免这个错误？如果我需要为服务器/客户端使用CORS（crossOrigin），请提供服务器端设置的示例

有没有什么方法可以防止这个错误

是否可以在画布上组合3个操作（裁剪、旋转、缩放），然后获得图像源Base64

如果有一个有效的例子就好了

---

谢谢。

这不是错误，而是浏览器的安全功能，因为加载跨域内容时画布会受到污染

您可以通过在服务器上设置http头来避免这种情况。但这一切都取决于特定浏览器如何解释您的代码

不再是了。（链接到启用服务器上的CORS:）

不再是了

对

注释代码示例：

为CORS正确配置服务器后，您可以下载不会污染画布的图像，如下所示：

var img=new Image();
img.crossOrigin="anonymous";
img.src="http://yourConfiguredServer.com/logo.png";

结果说明：

---

只是一个简单的问题：如果我将img对象的源更改为big image（），则不会启动onload函数。有什么想法吗？是的，此其他映像不在符合CORS的站点上托管。因此，您遇到了跨域访问错误。如果这是您的服务器，您必须使用我的答案第1页中的链接启用CORS。如果这不是您的服务器，那么您可以将映像移动到您的服务器上——CORS将启用您的服务器。