我在使用canvas進(jìn)行繪畫涂鴉開發(fā)的過程中，將圖片作為canvas的背景圖，在保存畫布的時候想將背景圖和當(dāng)前畫布內(nèi)容進(jìn)行整合的時候，發(fā)生加載背景圖的跨域錯誤
代碼如下:

export function drawImageHandle(context, url, sx, sy, sw,sh,dx,dy,dw ,dh ) {
  return new Promise((resolve, reject) => {
    const myImage = new Image();
    myImage.setAttribute("crossOrigin", "anonymous");
    myImage.src = url;
    myImage.onload = function() {
      if (dx || dy|| dw || dh) {
        context.drawImage(
          myImage,sx, sy, sw,sh,dx,dy,dw,dh
        );
      } else {
        context.drawImage(
          myImage,sx, sy, sw,sh
        );
      }
      resolve(myImage);
    };
    myImage.onerror = function() {
      reject(myImage)
    }
  });
}

drawImageHandle(
                context,
                this.design.modelImage,
                0,
                0,
                this.design.backImageWidth,
                this.design.backImageHeight
              ).then(() => {
                /**  測試 start */
                // let test = canvas.toDataURL("image/png");
                // let img = document.getElementById("avatar");
                // img.setAttribute("src", test);  // 測試
                // this.$toast.clear();
                // return false;
                /** 測試 end*/
                let base64 = canvas.toDataURL("image/png");
                 const file = base64toFile(base64, new Date().getTime());
                 const formData = new FormData();
                 formData.append('multipartFile' , file);
                 uploadAPI(formData).then((response) => { // response 上傳成功后 返回得圖片路徑地址
                   this.cartAnimationHandle(response.data)
                 }).finally(() => { this.$toast.clear();})
              })

報錯如下：

image.png

我百思不得其解，明明已經(jīng)設(shè)置了

imgs.setAttribute('crossOrigin', 'anonymous');

在阿里云的oss存儲里也設(shè)置了跨域訪問，為什么還是會報跨域錯誤

經(jīng)過一頓折騰后明白了，原來第一次設(shè)置背景圖的時候相當(dāng)于<img>標(biāo)簽，并不會跨域，但是瀏覽器將加載的背景圖緩存了起來，

當(dāng)再通過Image對象加載圖片的時候，瀏覽器自身會監(jiān)測發(fā)現(xiàn)有緩存圖片，但是又與當(dāng)前域名不一致認(rèn)為當(dāng)前是跨域訪問，這里即便是服務(wù)端設(shè)置允許跨域也沒有辦法
最后最后解決辦法來了

既然是瀏覽器本地緩存的鍋，那就不和瀏覽器的緩存玩了，

在用Image對象加載圖片的時候在src 地址后面拼接一個時間戳就OK了，如下

le imgs = new Image（）；

imgs.setAttribute('crossOrigin', 'anonymous');

imgs.onload = function(){

//實(shí)現(xiàn)自己業(yè)務(wù)

}

imgs.src = this_.dataInfo.imgSrc+'?tamp='+(new Date()).valueOf();
重點(diǎn)就是將圖片的地址后面增加時間戳參數(shù)，從而繞過緩存