记一次canvas由于本地缓存引起的CORS跨域问题

我在使用canvas进行绘画涂鸦开发的过程中，将图片作为canvas的背景图，在保存画布的时候想将背景图和当前画布内容进行整合的时候，发生加载背景图的跨域错误
代码如下:

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

我百思不得其解，明明已经设置了

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

在阿里云的oss存储里也设置了跨域访问，为什么还是会报跨域错误

经过一顿折腾后明白了，原来第一次设置背景图的时候相当于标签，并不会跨域，但是浏览器将加载的背景图缓存了起来，

当再通过Image对象加载图片的时候，浏览器自身会监测发现有缓存图片，但是又与当前域名不一致认为当前是跨域访问，这里即便是服务端设置允许跨域也没有办法
最后最后解决办法来了

既然是浏览器本地缓存的锅，那就不和浏览器的缓存玩了，

在用Image对象加载图片的时候在src 地址后面拼接一个时间戳就OK了，如下

le imgs = new Image（）；

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

imgs.onload = function(){

//实现自己业务

}

imgs.src = this_.dataInfo.imgSrc+'?tamp='+(new Date()).valueOf();
重点就是将图片的地址后面增加时间戳参数，从而绕过缓存