這篇文章主要介紹了如何實現(xiàn)跨域圖片資源權(quán)限CORS enabled image，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

公司主營業(yè)務(wù)：網(wǎng)站制作、網(wǎng)站設(shè)計、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出陽明免費做網(wǎng)站回饋大家。

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

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

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

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

示例: 從其他站點保存圖片

首先, 圖片服務(wù)器必須設(shè)置相應(yīng)的 Access-Control-Allow-Origin響應(yīng)頭。添加 img 元素的 crossOrigin 屬性來請求頭。比如Apache服務(wù)器,可以拷貝HTML5 Boilerplate Apache server configs 中的配置信息, 來進行回應(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è)置生效之后, 就可以像本站的資源一樣, 保存其他站點的圖片到 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;
//  確保緩存的圖片也觸發(fā) load 事件
if ( img.complete || img.complete === undefined ) {
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    img.src = src;
}

感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何實現(xiàn)跨域圖片資源權(quán)限CORS enabled image”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

新聞名稱：如何實現(xiàn)跨域圖片資源權(quán)限CORSenabledimage-創(chuàng)新互聯(lián)
網(wǎng)頁網(wǎng)址：http://jinyejixie.com/article14/digege.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、靜態(tài)網(wǎng)站、網(wǎng)站收錄、電子商務(wù)、網(wǎng)站設(shè)計、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)