什么是“被污染”的Canvas
- 可以不通過 CORS 就在畫布中使用圖片蚕脏，但是會(huì)無法使用畫布的
toBlob()/toDataURL()等方法
使用crossorigin屬性
- 避免未經(jīng)許可拉取遠(yuǎn)程網(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 );
// 存儲(chǔ)在本地
localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );
}
//src 屬性一定要寫到 onload 的后面，否則程序在 IE 中會(huì)出錯(cuò)。
img.src = src;
crossorigin屬性值
-
anonymous跨域請(qǐng)求會(huì)被發(fā)送研乒，但是不發(fā)送憑證，即不發(fā)送cookie或者證書或者HTTP Basic 授權(quán) -
use-credentials跨域請(qǐng)求會(huì)被發(fā)送，并且發(fā)送憑證
