07利用localStorage和Canvas和crossOrigin进行图片缓存

什么是“被污染”的Canvas

1. 可以不通过 CORS 就在画布中使用图片，但是会无法使用画布的toBlob()/toDataURL()等方法

使用crossorigin属性

1. 避免未经许可拉取远程网站信息而导致用户信息泄露

案例

服务器端要配置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 跨域请求会被发送，但是不发送凭证，即不发送cookie或者证书或者HTTP Basic 授权
2. use-credentials 跨域请求会被发送，并且发送凭证