canvas跨域及cross-origin污染问题处理

canvas跨域

准确的说应该是Ajax请求图片文件（bufferArray）时跨域，如果直接拿图片的src,然后new Image() 调用putImageData() 则不存在跨域问题，图片一样可以显示到canvas上。如果仅仅是展示这样完全足够。如果调用到getImageData() 或toDataURL() 操作的时候，就会有cross-orgin污染问题。目前比较靠谱的解决方法有两种：

一，后端设置

后端允许跨域：

header("Access-Control-Allow-Origin: *");

或者指定域名：

header("Access-Control-Allow-Origin: www.xxx.com");

二，前端加node做为服务中转层

基本思想是，从页面发起请求给node服务，node服务拿图片的url地址发起请求给后台服务得到图片文件的buffer数据，然后node再把buffer数据返回给前端页面

eg:

前端页面的请求为：

var imgsrc = 'http://www.xxx.com/test.png';
var newImgsrc = '/loadImageFile?imgsrc=' + imgsrc;
var xhr = new XMLHttpRequest();
xhr.open('GET', newImgsrc, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function () {
	console.log(this.response) // bufferArray
};
xhr.send();

mode服务：

router.get("/loadImageFile", function (req, res) {
    var imgurl = req.query.imgsrc；
    http.get(imgurl , function (res) {
       var data = [];
         res.on('data', function(chunk) {
             data.push(chunk);
         }).on('end', function() {
             var buffer = Buffer.concat(data);
             res.send(buffer)；
         });
     })；
});

网上看到说设置img.crossOrigin = ‘anonymous’ 等方法测试了并无卵用；对于可跨域的图片不需要，对于不可跨域的图片设置了调用getImageData() 会报错cross-origin污染。