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

【问题标题】：crop canvas html5 to image as base64 on client side without server-side code在没有服务器端代码的情况下，将画布 html5 裁剪为客户端的 base64 图像
【发布时间】：2014-06-09 15:42:10
【问题描述】：

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

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

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

总结：

有没有办法避免这个错误？如果我需要为服务器/客户端使用 CORS（crossOrigin），请提供服务器端设置示例；
是否有任何 hack 可以防止此错误？
是否可以在画布上组合 3 种操作（裁剪、旋转、缩放），然后获取 Base64 格式的图像源？
如果有一个工作示例会很棒。

谢谢。

【问题讨论】：

developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

标签： javascript html image canvas jcrop

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

不再。（在服务器上启用 CORS 的链接：http://enable-cors.org/）
没有了。
是的。
带注释的代码示例：http://jsfiddle.net/m1erickson/gz6e8/

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

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

结果说明：

【讨论】：

只是一个简单的问题：如果我将 img 对象的来源更改为大图像 (whatdigitalcamera.media.ipcdigital.co.uk/11133/00000873b/1ea7/…)，则不会触发 onload 函数。任何想法？ jsfiddle.net/gz6e8/1
是的，此其他图像未托管在符合 CORS 的站点上。因此，您遇到了跨域访问错误。如果那是您的服务器，您必须使用我的答案#1 中的链接启用您的网站。如果那不是您的服务器，那么您可以将图像移动到您的服务器 - 并且 CORS 启用您的服务器。