cnavas处理跨域图片

/**
 * @name 拼图
 * @param {data} Array 只包含src的数组
 * @param {width} Int  单个图片宽度
 * @param {height} Int  单个图片高度
 * @param {col} Int  列数
 * @param {row} Int  行数
 */
export const jigsaw = ({ data = [], width = 15, height = 15, col = 3, row = 3 }) => {
  if (data.length <= 0) { return "" }
  //不支持跨域
  if (data.length <= 0) { Toast; return; }
  const canvas = document.createElement("canvas");
  const d2 = canvas.getContext("2d");
  let j = 2; //间隙宽度
  let x, y; //每次
  x = y = 0;
  let _width = width * col + (j * (col - 1)) + j;
  let _height = height * row + (j * (row - 1)) + j;
  Object.assign(canvas, { width: _width, height: _height })
  d2.fillStyle = "rgba(0,0,0,0.1)";
  d2.fillRect(0, 0, _width, _height);

  let primise = data.map((d, index) => {
  
    return $http.IMAGE(d)
      .then(data => {

        return new Promise((resolve, reject) => {
          let u = URL.createObjectURL(data);
          let img = new Image();
          img.src = u
          img.addEventListener("load", () => {

            resolve(img);
          })
          img.addEventListener("error", (e) => {

            reject(e)
          })
        })


      })
  })

  return Promise.all(primise)
    .then(data => {

      data.forEach((el, ind) => {
        x = (ind % col);
        d2.drawImage(el, x * width + (x + j), y * height + (y + j), width, height);
        if ((ind + 1) % col == 0) { y += 1 }
      })

      return canvas.toDataURL("image/png");
    })

}

axios部分

 IMAGE(str){
     // 获取远端图片
     return axios({
        method:'get',
        url:str+"&t="+Date.now(),
        responseType:'blob'
      })
  }