图片与 dataUrl 相互转换

使用 canvas 将图片转成 dataUrl (html2canvas)

      html2canvas(element, {
        // allowTaint: false,
        useCORS: true
        // width: element.clientWidth,
        // height: element.clientHeight
        // dpi: window.devicePixelRatio * 2,
      })
        .then(canvas => {
          // canvas
          if (this.$store.state.common.ISDEBUG) {
            console.log("canvas:");
            console.log(canvas);
          }
          let dataUrl = canvas.toDataURL(
            "image/png"
          );
          this.imgList[this.imgList.length - 1].content = dataUrl
          // this.cardImg[index + ""] = canvas.toDataURL("image/png");

          // this.shapeImg = canvas.toDataURL("image/png");
          this._compressAndUploadFile({
            content:dataUrl,
            file:this.dataURLtoFile(
              canvas.toDataURL("image/png"),
              this.lastFile.file.name
            )
          }
          );
        })
        .catch(err => {
          if (this.$store.state.common.ISDEBUG) {
            console.log("err:");
            console.log(err);
          }
        });
    },

dataUrl 转文件

    dataURLtoFile(dataurl, filename) {
      console.log("dataURLtoFile");
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
    },

相关链接

2020, Jun 09

| 本文访问量:

上一篇 ubuntu In icon 下一篇 ubuntu 开机挂在硬盘