亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

  發(fā)布時(shí)間：2018-09-17 15:32:27   作者：鐵錨   我要評論
這篇文章主要介紹了跨域圖片資源權(quán)限(CORS enabled image)的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

HTML 規(guī)范文檔為 images 引入了 crossorigin 屬性, 通過設(shè)置適當(dāng)?shù)念^信息 CORS , 可以從其他站點(diǎn)加載 img 圖片, 并用在 canvas 中,就像從當(dāng)前站點(diǎn)(current origin)直接下載的一樣.

crossorigin 屬性的使用細(xì)節(jié), 請參考CORS settings attributes.

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

盡管沒有CORS授權(quán)也可以在 canvas 中使用圖像, 但這樣做就會(huì)污染(taints)畫布。 只要 canvas 被污染, 就不能再從畫布中提取數(shù)據(jù), 也就是說不能再調(diào)用 toBlob(), toDataURL() 和 getImageData() 等方法, 否則會(huì)拋出安全錯(cuò)誤(security error).

這實(shí)際上是為了保護(hù)用戶的個(gè)人信息,避免未經(jīng)許可就從遠(yuǎn)程web站點(diǎn)加載用戶的圖像信息,造成隱私泄漏。

(譯者注: 如果用戶登陸過QQ等社交網(wǎng)站, 假若不做保護(hù) ,則可能打開某個(gè)網(wǎng)站后,該網(wǎng)站利用 canvas 將用戶的圖片信息獲取,上傳,進(jìn)而引發(fā)泄露.)

示例: 從其他站點(diǎn)保存圖片

首先, 圖片服務(wù)器必須設(shè)置相應(yīng)的 Access-Control-Allow-Origin 響應(yīng)頭。添加 img 元素的 crossOrigin 屬性來請求頭。比如Apache服務(wù)器,可以拷貝HTML5 Boilerplate Apache server configs 中的配置信息, 來進(jì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>

這些設(shè)置生效之后, 就可以像本站的資源一樣, 保存其他站點(diǎn)的圖片到 DOM存儲(chǔ) 之中(或者其他地方)。

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;
//  確保緩存的圖片也觸發(fā) 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 No support No support ?

Mobile

Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

另請參見

Chrome:在WebGL中使用跨域圖片

HTML規(guī)范-crossorigin屬性

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論