html转canvas base64 转 domtoimage

domtoimage -- html转化为图片 

下载

npm install --save html2canvas

引入

import html2canvas from "html2canvas";

使用

  <div class="admit book" ref="imageWrapper"></div>

 data() {
        return {
            dataURL: "",
            showImg: false,
        };
    }, 
mounted() {
        html2canvas(this.$refs.imageWrapper, {
            scale: 8,
            dpi: 96 * 8,
        }).then((canvas) => {
            let imgUrl = canvas.toDataURL("image/png");
            this.dataURL = imgUrl;
            this.showImg = true;
            this.downloadIamge(this.dataURL);
        });
    },
methods {
     downloadIamge(imgsrc) {
       var image = new Image();
       image.setAttribute(crossOrigin, anonymous);
       image.onload = async () = {
         var canvas = document.createElement(canvas);
         canvas.width = image.width;
         canvas.height = image.height;
         var context = canvas.getContext(2d);
         context.drawImage(image, 0, 0, image.width, image.height);
         var base64Data = canvas.toDataURL(imagepng);
         const base64ToBlob = (base64Data) = {
           let arr = base64Data.split(,),
             fileType = arr[0].match((.);)[1],
             bstr = atob(arr[1]),
             l = bstr.length,
             u8Arr = new Uint8Array(l);
           while (l--) {
             u8Arr[l] = bstr.charCodeAt(l);
           }
           return new Blob([u8Arr], {
             type fileType,
           });
         };
          blob转file
         const blobToFile = function(newBlob, fileName) {
           return new File([newBlob], fileName);
         };
          调用
         const blob = base64ToBlob(base64Data);
         const file = blobToFile(blob, 123.png);
         const fd = new FormData();
         fd.append(file, file);
         fd.append(filePath, commonToolsMobilenoticeOf);
         const res = await fileUpload(fd);
         window.location.href = res.details.data.filePath;
       };
       image.src = imgsrc;
     },
  },