在没有服务器端代码的情况下，在客户端将画布 html5 裁剪为 base64 图像

Question

我有一个像http://socialtalent.co/wp-content/uploads/blog-content/so-logo.png这样的图像源，没有 FileReader 对象。

我只需要使用客户端 JavaScript 从不同域裁剪此图像。

当我尝试从画布 (canvas.toDataURL()) 获取源代码时，出现安全错误（不安全操作）。

总之：

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

2. 是否有任何黑客可以防止此错误？

3. 是否可以在画布上组合 3 种操作（裁剪、旋转、缩放），然后以 Base64 格式获取图像源？

4. 有一个工作示例会很棒。

谢谢你。

Answer 1

1. 不再。 （在服务器上启用 CORS 的链接： http : //enable-cors.org/ ）

2. 不再。

3. 是的。

4. 带注释的代码示例： http : //jsfiddle.net/m1erickson/gz6e8/

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

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

结果说明：

Answer 2

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

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