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中的設定資訊, 來回應:
<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
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 13 | 8 | Nosupport | Nosupport | ? |
Mobile
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | ? | ? | ? | ? |
另請參見
Chrome:在WebGL中使用跨網域圖片
HTML規範-crossorigin屬性
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VeVb武林網。