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 =$('
').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';
复制代码