启用了 CORS 的图像

HTML规范为图像引入了 crossorigin 属性，结合合适的 CORS 头，就可以实现在画布中使用跨域 <img> 元素的图像。

参见 CORS 设置属性 来了解如何使用 crossorigin 属性的详细信息。

什么是 “被污染” 的画布？

虽然可以未通过 CORS 就在画布中使用图像，但是这样做会污染画布。一旦画布被污染，您将无法从画布中读取数据。例如，您不能再使用画布的 toBlob()，toDataURL() 或 getImageData()方法；这样做会抛出一个安全错误。

这种机制可以避免未经许可拉取远程网站信息，从而导致用户的隐私泄露。

实例：存储一张外部域中的图片

您必须有一个托管图像的服务器来设置正确的 Access-Control-Allow-Origin 标头。使用 crossOrigin 属性会增加一个请求头。您可以使用 HTML5 Boilerplate Apache server configs 中代码来实现正确响应头：

<IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
            SetEnvIf Origin ":" IS_CORS
            Header set Access-Control-Allow-Origin "*" env=IS_CORS
        </FilesMatch>
    </IfModule>
</IfModule>

配置完成后，您可以将这些图片保存到 DOM Storage 中，就像这些图片就在你自己的域名下一样。

var img = new Image,
    canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d"),
    src = "http://example.com/image"; // 这里插入图片 URL

img.crossOrigin = "Anonymous";

img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage( img, 0, 0 );
    localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );
}
img.src = src;
// 确保缓存图像的加载事件也被触发
if ( img.complete || img.complete === undefined ) {
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    img.src = src;
}

桌面浏览器兼容性

特性 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基础支持 13 8 未实现 未实现 未知

移动浏览器兼容性

特性 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基础支持 未知 未知 未知 未知 未知

相关链接