html5 webgl 图片跨域,跨域图片资源权限(CORS enabled image)

HTML 规范文档为 images 引入了 crossorigin 属性, 通过设置适当的头信息 CORS, 可以从其他站点加载 img 图片, 并用在 canvas 中,就像从当前站点(current origin)直接下载的一样.

crossorigin 属性的使用细节, 请参考CORS settings attributes.

什么是 “被污染的(tainted)” canvas?

尽管没有CORS授权也可以在 canvas 中使用图像, 但这样做就会污染(taints)画布。 只要 canvas 被污染, 就不能再从画布中提取数据, 也就是说不能再调用 toBlob(), toDataURL() 和 getImageData() 等方法, 否则会抛出安全错误(security error).

这实际上是为了保护用户的个人信息,避免未经许可就从远程web站点加载用户的图像信息,造成隐私泄漏。

(译者注: 如果用户登陆过QQ等社交网站, 假若不做保护 ,则可能打开某个网站后,该网站利用 canvas 将用户的图片信息获取,上传,进而引发泄露.)

示例: 从其他站点保存图片

首先, 图片服务器必须设置相应的Access-Control-Allow-Origin响应头。添加 img 元素的 crossOrigin 属性来请求头。比如Apache服务器,可以拷贝HTML5 Boilerplate Apache server configs中的配置信息, 来进行回应:

SetEnvIf Origin ":" IS_CORS

Header set Access-Control-Allow-Origin "*" env=IS_CORS

这些设置生效之后, 就可以像本站的资源一样, 保存其他站点的图片到 DOM存储 之中(或者其他地方)。

var img = new Image,

canvas = document.createElemen