safari浏览器canvas图片crossOrigin跨域失败

最近在做一个canvas绘图的项目，需要在canvas上引入一张跨域图片，当调drawImage和getImageData API时会提示跨域错误

解决方案一

在访问图片response新增Access-Control-Allow-Origin:*
canvas获取图片是，新增crossOrgin属性

const img = new Image();
img.crossOrigin = 'anonymous';
img.src = 'xxx.png';
img.onload = function() {
    console.log('图片载入完成');
}

实测发现在安卓和chrome中完美解决，但是在苹果和safari浏览器中还是报跨域错误，又经过调研，得到以下解决方案

解决方案二

通过XMLHttpRequest对象获取图片的blob数据，然后再传递给图片src，就能完美解决

function getImageBlob(url, callback) {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.onload = function () {
        if (parseInt(this.status, 10) === 200) {
            if (typeof callback === 'function') {
                callback(URL.createObjectURL(this.response));
            }
        }
    };
    xhr.send();
}

function getImage(e) {
    const img = new Image();
    img.src = e;
    img.onload = function () {
        ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 400, 400);
    };
}

getImageBlob('xxx.png', getImage);

转载于:https://www.cnblogs.com/cococe/p/10557339.html