canvas的getImageData不支持跨域的解决方法；

今天作项目的时候使用想使用canvas对wrapper背景作高斯模糊处理， 由于考虑到尽可能模拟真实开发项目，使用网络请求资源，因此仍是引用网络上的带图片连接的json文件。 我以前写过黑白，马赛克，过曝，过饱和滤镜但那时候一直用本地src目录下的图片，因此仍是第一次踩这个坑。

canvas 的 getImageDate 函数在处理跨域图片的时候会报错。

chrome：Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

ff:SecurityError: The operation is insecure.

ie edge : SCRIPT5022: SCRIPT5022: SecurityError

浏览器都会由于安全问题拒绝访问非同源的资源

添加dom到父级节点头部，设置css3 filter:blur(5px)样式。

let renderImg = (src) => {
        var img = new Image();
        img.src = src;
        img.onload = function () {
        
            // canvas 不支持跨域，这个方法仅限于在同源策略下中使用
            // blurImg jq 插件采用canvas绘图技术
            // root.blurImg(img, $('.wrapper'))
            
            //建立一个div，再把div从父级节点头部插入，设置绝对定位，使用css3自带的模糊。
            $(".bg-album").remove()
            //每次调用该函数记得删除以前prepend的节点
            var bgImg =$('<div class="bg-album"></div>').css({
                width: "100%",
                height: '100%',
                position: "absolute",
                left: 0,
                top: 0,
                backgroundImage: `url(${src})`,
                backgroundSize: 'cover',
                backgroundPosition: 'center center',
                filter:`blur(5px)`
            });
            //
            $('.wrapper').prepend(bgImg)
        } 
    }
复制代码

canvas 不支持跨域是能够解决的 ；

• 将image对象设置成容许跨域，img.crossOrigin = '';

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

var img = new Image();
img.crossOrigin = '';
img.onload = function () {
    context.drawImage(this, 0, 0);
    context.getImageData(0, 0, this.width, this.height);
};
img.src = 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png';
复制代码