vue使用html2canvas

有时候我们会用到将网页上的东西转换为图片的需求，有一种插件就可以帮助我们来完成，现在我来介绍这个插件如何使用

1.安装html2canvas

npm install --save html2canvas

2.导入

import html2canvas from "html2canvas";

3.html

    <div ref="imageTofile">
      <div>我是截取的内容</div>
    </div>
    <img :src="htmlUrl" v-show="isShow" />

4.转成图片的方法

  toImage() {
      html2canvas(this.$refs.imageTofile, {
        backgroundColor: null,
      }).then((canvas) => {
        let url = canvas.toDataURL("image/png");
        this.htmlUrl = url; 
        if (this.htmlUrl) {
          this.isShow = true;
        }
      });

5.完整代码（仅供参考）

<template>
  <div>
    <!-- 把需要生成截图的元素放在一个元素容器里,设置一个ref -->
    <div ref="imageTofile">
      <!-- 这里放需要截图的元素,自定义组件元素也可以 -->
      <div>我是截取的内容</div>
      <div>我是截取的内容</div>
      <div>我是截取的内容</div>
      <div>我是截取的内容</div>
      <div>我是截取的内容</div>
    </div>
    <!-- 如果需要展示截取的图片,给一个img标签 -->
    <img :src="htmlUrl" v-show="isShow" />
    <button @click="toImage">截取</button>
  </div>
</template>
<style scoped>
</style>
<script>
import html2canvas from "html2canvas";
export default {
  data() {
    return {
      htmlUrl: "",
      isShow: false,
    };
  },
  methods: {
    // 页面元素转图片
    toImage() {
      // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
      html2canvas(this.$refs.imageTofile, {
        backgroundColor: null,
      }).then((canvas) => {
        let url = canvas.toDataURL("image/png");
        this.htmlUrl = url; // 把生成的base64位图片上传到服务器,生成在线图片地址
        if (this.htmlUrl) {
          // 渲染完成之后让图片显示，用v-show可以避免一些bug
          this.isShow = true;
        }
        // this.sendUrl();
      });
    }, // 图片上传服务器
    sendUrl() {
      // 如果图片需要formData格式,就自己组装一下,主要看后台需要什么参数
      // const formData = new FormData()
      // formData.append('base64', this.company.fileUrl)
      // formData.append('userId', 123)
      // formData.append('pathName', 'pdf')
     //   ==================
    //   this.$ajax({
    //     url: apiPath.common.uploadBase,
    //     method: "post",
    //     data: this.htmlUrl,
    //   }).then((res) => {
    //     if (res.code && res.data) {
    //     }
    //   });
    },
  },
};
</script>

6.效果展示

7.参考

感谢https://www.cnblogs.com/shirliey/p/10647239.html博主给的思路