裁剪画布html5在客户端映像为base64，没有服务器端代码

Question

我有像http://socialtalent.co/wp-content/uploads/blog-content/so-logo.png这样的图像源而不是FileReader对象。

所以我需要使用客户端javascript从不同的域中裁剪此图像。

当我尝试从canvas获取源代码（canvas.toDataURL（））时，我收到安全错误（不安全的操作）。

总结： 1.有没有办法避免这个错误？如果我需要为服务器/客户端使用CORS（crossOrigin），那么请提供服务器端设置的示例; 2.是否有任何黑客可以防止此错误？ 3.是否可以在画布上组合3个操作（裁剪，旋转，缩放），然后将图像源作为Base64 有一个工作的例子会很棒

谢谢。

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标头来避免这种情况。但这一切都归结为具体的浏览器解释你的代码！