dom元素转成 图片url

130 阅读1分钟
   Photobody() {
      //  目标dom
      let video = document.querySelector("#video");
      let canvas = document.getElementById("bodyCanvas");
      let ctx = canvas.getContext("2d");
	  //把目标dom画到canvas上
      ctx.drawImage(video, 0, 0, 440, 250);
	  //得到base64
      let img = canvas.toDataURL();
      let blob = this.dataURLToBlob(img);
      let formData = new FormData();
      formData.append("file", blob);
	  //调接口转成url数据
      servers.FaceUpload(formData).then((res) => {
        if (res.code == 200) {
          this.bodyImg = res.data;
          this.ruleForm.bodyImg = res.data;
        } else {
          this.$message.error("文件上传失败");
        }
      });
    },

base64转成blob函数

    dataURLToBlob(dataurl) {
      var arr = dataurl.split(",");
      var mime = arr[0].match(/:(.*?);/)[1];
      var bstr = atob(arr[1]);
      var n = bstr.length;
      var u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      const timestamp = new Date().getTime() + ".png";
      return new File([u8arr], timestamp, { type: mime });
    },