最近在做一个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);