前端将网页保存为图片，再发送给用户的流程

第一步：将网页图片保存为图片

saveQrcode() {
   
      this.loadingFlag = true;
      window.pageYOffset = 0;
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
      //你想要生成的图片的最外层div加一个id=qrCodeContainer
      let htmlDom = document.getElementById("qrCodeContainer");
      html2canvas(htmlDom, {
   
        backgroundColor: null, // null 表示设置背景为透明色
        width: htmlDom.clientWidth, //dom 原始宽度
        height: htmlDom.clientHeight,
        scrollY: 0,
        scrollX: 0,
        allowTaint: false,
        useCORS: true, // 解决需要生成的html中有img，生成的图片不显示
      }).then((canvas) => {
   
      //imgUrl是生成的base64，放到浏览器可直接查看图片，不过特别长，若调接口的时候传给后端，会有卡顿，所以将base64转成file文件
        const imgUrl = canvas.toDataURL("image/jpeg");
        //把base64转成file文件
        let picFile = this.dataURLtoBlob(imgUrl, "图片");
      	// 调用cos上传
        this.upload(picFile, "medAdvice/").then((res) => {
   
        //调接口获取MediaId，传参是图片url
          this.getMediaId(res.Url);
        });
      });
    },

将base64转换为blob（上面代码里要用到）

dataURLtoBlob(dataurl, fileName) {
   
      var arr = dataurl.split(","),
        mime = arr[0].match(