07利用localStorage和Canvas和crossOrigin進行圖片緩存

什么是“被污染”的Canvas

  1. 可以不通過 CORS 就在畫布中使用圖片，但是會無法使用畫布的toBlob()/toDataURL()等方法

使用crossorigin屬性

  1. 避免未經(jīng)許可拉取遠程網(wǎng)站信息而導(dǎo)致用戶信息泄露

案例

服務(wù)器端要配置Access-Control-Allow-Origin

var img = new Image,
    canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d"),
    src = "http://example.com/image"; // insert image url here

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") );
}
//src 屬性一定要寫到 onload 的后面，否則程序在 IE 中會出錯。
img.src = src;

crossorigin屬性值

  1. anonymous 跨域請求會被發(fā)送，但是不發(fā)送憑證，即不發(fā)送cookie或者證書或者HTTP Basic 授權(quán)
  2. use-credentials 跨域請求會被發(fā)送，并且發(fā)送憑證
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容