跨域圖片資源權限(CORS enabled image)

HTML 規範文件為images 引入了crossorigin 屬性, 透過設定適當的頭資訊CORS, 可以從其他網站載入img 圖片, 並用在canvas 中,就像從目前網站(current origin)直接下載的一樣.

crossorigin 屬性的使用細節, 請參考CORS settings attributes.

儘管沒有CORS授權也可以在canvas 中使用圖像, 但這樣做就會污染(taints)畫布。 只要canvas 被污染, 就不能再從畫布中提取資料, 也就是說不能再呼叫toBlob(), toDataURL() 和getImageData() 等方法, 否則會拋出安全錯誤(security error).

這實際上是為了保護用戶的個人資訊,避免未經許可就從遠端web站點加載用戶的圖像資訊,造成隱私洩漏。

(譯者註: 如果使用者登陸過QQ等社群網站, 假若不做保護,則可能開啟某個網站後,該網站利用canvas 將使用者的圖片資訊取得,上傳,進而引發外洩.)

首先, 圖片伺服器必須設定對應的Access-Control-Allow-Origin回應頭。加入img 元素的crossOrigin 屬性來請求頭。例如Apache伺服器,可以拷貝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存儲之中(或者其他地方)。

 var img = new Image, canvas = document.createElement(canvas), ctx = canvas.getContext(2d), src = http://example.com/image; // 具體的圖片地址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;// 確保快取的圖片也觸發load 事件if ( img.complete | | img.complete === undefined ) { img.src = data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==; img.src = src;}

瀏覽器相容性

Desktop

Mobile

另請參見

Chrome:在WebGL中使用跨網域圖片

HTML規範-crossorigin屬性

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。