?
This document uses PHP Chinese website manual Release
HTML 規(guī)范中圖片有一個(gè)crossorigin屬性，結(jié)合合適的CORS響應(yīng)頭，就可以實(shí)現(xiàn)在畫布中使用跨域<img>元素的圖像。
查看 CORS settings attributes 來了解更多crossorigin屬性的用法。
什么是“被污染”的 canvas?
盡管不通過 CORS 就可以在畫布中使用圖片，但是這會(huì)污染畫布。一旦畫布被污染，你就無法讀取其數(shù)據(jù)。例如，你不能再使用畫布的 toBlob(), toDataURL() 或 getImageData() 方法，調(diào)用它們會(huì)拋出安全錯(cuò)誤。
這種機(jī)制可以避免未經(jīng)許可拉取遠(yuǎn)程網(wǎng)站信息而導(dǎo)致的用戶隱私泄露。
示例: 存儲(chǔ)一張外部域中的圖片
你必須有一個(gè)可以對(duì)圖片響應(yīng)正確Access-Control-Allow-Origin響應(yīng)頭的服務(wù)器。你可以使用以下片段 (來自 HTML5 Boilerplate Apache server configs) 實(shí)現(xiàn)正確響應(yīng)頭。
<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 存儲(chǔ)中了，就像這些圖片在你自己域名之下一樣。
var img = new Image,
canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d"),
src = "http://example.com/image"; // insert image url hereimg.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;// make sure the load event fires for cached images tooif ( img.complete || img.complete === undefined ) {
img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
img.src = src;}瀏覽器兼容性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
Basic support | 13 | 8 | No support | No support | ? |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? |