关于new Image()图片跨域的问题

前言

在用canvas绘制培训证书时，如果是有头像的情况，需要渲染图片。在测试过程中，发现会偶尔出现图片跨域的问题，解决方法是给图片地址加上随机数防止图片缓存。

let canvas = document.getElementById(ele+id);
let ctx = canvas.getContext("2d");
let myImage = new Image();
this.toDataURL(data.comple_credit_template+'?v=' + Math.random(), function(dataUrl) {
    myImage.src = dataUrl;
});
myImage.crossOrigin = "Anonymous";
myImage.onload = function() {
   if (myImage.complete) {
ctx.drawImage(myImage,0,0,data.comple_credit_template_width,data.comple_credit_template_height)
   }
}

toDataURL方法

toDataURL(url, callback) {
        var xhr = new XMLHttpRequest();
        xhr.onload = function() {
          var reader = new FileReader();
          reader.onloadend = function() {
            callback(reader.result);
          };
          reader.readAsDataURL(xhr.response);
        };
        xhr.open("GET", url);
        xhr.responseType = "blob";
        xhr.send();
      },

赏

谢谢你请我吃糖果