解决Canvas中toDataURL()的跨域问题

画布污染的解决方法

1.设置img的属性 （crossorigin）说明如下
HTML 的img标签中图片有一个 crossorigin 属性，结合合适的 CORS 响应头（这里的这一步需要后端做跨域处理），就可以实现在画布中使用跨域 img 元素的图像;

2.代码使用如下(HTML设置和JS设置)

HTML中使用crossorigin

    <img crossorigin="anonymous" / >

JS中使用crossorigin

   var img = new Image(400, 400)
   img.crossOrigin = 'Anonymous'

downLoadImg(imgsrc) {
      const image = new Image();
      // 解决跨域 Canvas 污染问题
      image.setAttribute("crossOrigin", "anonymous");
      image.onload = function() {
        const canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        const context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        const url = canvas.toDataURL("image/png",0.7); //得到图片的base64编码数据
        const a = document.createElement("a"); // 生成一个a元素
        a.id = Math.random();
        // a.download = name?name+'.png':"photo.png"; // 设置图片名称
        a.download = imgsrc.substring(imgsrc.lastIndexOf('/')).slice(1);
        a.href = url; // 将生成的URL设置为a.href属性
        a.click(); // 触发a的单击事件
      };
      image.src = imgsrc;
    },