html2canvas实现页面截图并使用axios上传

安装

npm install --save html2canvas

1、简单实例

点击按钮截取id=capture 的元素

<template>
  <div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
    <button @click="screenshots">screenshots</button>
  </div>
</template>
 
<script>
import html2canvas from "html2canvas";

export default {
  methods: {
    screenshots() {
      html2canvas(document.querySelector("#capture")).then(canvas => {
        document.body.appendChild(canvas);
      });
    }
  }
};
</script>

生成的图片可以右键保存
在这里插入图片描述

2、问题：截图不全

如果在vue项目中出现问题：截图不全，

可以通过生成虚拟dom的方法解决

代码如下

<template>
  <div
    id="capture"
    ref="imageDom"
    style="padding: 10px; background: #f5da55;height:1000px;width100%"
  >
    <h4 style="color: #000;">Hello world!</h4>
    <button @click="screenshots">screenshots</button>
  </div>
</template>
 
<script>
import html2canvas from "html2canvas";

export default {
  methods: {
    screenshots() {
      let imageDom = this.$refs.imageDom;
      var width = imageDom.style.width;
      var cloneDom = imageDom.cloneNode(true);

      // 设置参数
      cloneDom.style.padding = "16px";
      cloneDom.style.position = "absolute";
      cloneDom.style.top = "0px";
      cloneDom.style.zIndex = "-1";
      cloneDom.style.width = width;

      document.body.appendChild(cloneDom);

      html2canvas(cloneDom).then(canvas => {
        // 转成图片，生成图片地址
        var imgUrl = canvas.toDataURL("image/png");

        var eleLink = document.createElement("a");
        eleLink.href = imgUrl; // 转换后的图片地址
        eleLink.download = "pictureName";
        // 触发点击
        document.body.appendChild(eleLink);
        eleLink.click();
        // 然后移除
        document.body.removeChild(eleLink);
      });

      cloneDom.style.display = "none";
    }
  }
};
</script>

3、截图并上传

安装axios

npm install --save axios

实现步骤：
1、点击按钮，通过html2canvas 将id为head-image 的元素截取为canvas
2、通过canvas 得到dataURL
3、将dataURL 转换为Blob二进制流
4、通过axios上传文件

<template>
  <div>
    <h4 style="color: red;" id="head-image">Hello world!</h4>
    <button @click="saveImage">screenshots</button>
  </div>
</template>
 
<script>
import html2canvas from "html2canvas";
import axios from "axios";

export default {
  methods: {
    async saveImage() {
      const res = await this.html2canvasAndUploadFile("#head-image");
      console.log(res);
    },

    // 传入元素id,获取服务器返回的结果
    async html2canvasAndUploadFile(selector) {
      const canvas = await html2canvas(document.querySelector(selector));
      // 将canvas转成base64
      let dataURL = canvas.toDataURL("image/png");

      // 打印的是图片的base64编码
      let blob = this.dataUrlToBlob(dataURL);
      return await this.uploadFile(blob);
    },

    // 将base64转成图片文件流
    dataUrlToBlob(dataUrl) {
      let arr = dataUrl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        // arr[0]是data:image/png;base64
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);

      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }

      let imgFile = new Blob([u8arr], {
        type: mime
      });
      return imgFile;
    },

    // 上传二进制文件
    async uploadFile(blob) {
      const formData = new FormData();
      formData.append("image", blob);

      const res = await axios({
        method: "post",
        url: "/uploadurl",
        data: formData,
        headers: {
          "Content-Type": "multipart/form-data"
        }
      });

      return res.data;
    }
  }
};
</script>

参考

使用 axios 上传媒体文件

html页面转成图片，并传给后台二进制文件流

来源：CSDN

作者：彭世瑜

链接：https://blog.csdn.net/mouday/article/details/104621588

标签

html2canvas

blob