vue页面截图等功能

Posted 2021-06-30 qaakd

第一步安装html2canvas组件:

npm install html2canvas --save

第二步导入页面:

import html2canvas from'html2canvas'

test.vue:（截图功能）
 

<template>
  <div>
    <!--<button>{{$store.state.name}}</button>-->
    test_test
    <div ref="imageTofile" style="color:red;">
      test
      987654321
    </div>

    <img :src="htmlUrl" />

  </div>
</template>

<script>
  import html2canvas from'html2canvas'
  export default {
    data() {
      return {
        htmlUrl:"",
      }
    },
    methods:{
      barPhoto() {
        //指定在500毫秒后执行toImage
        setTimeout(this.toImage, 500);
      },

      toImage() {
        // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
        html2canvas(this.$refs.imageTofile, {
          width:200,
          height:200,
          backgroundColor: null,
          useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
        }).then(canvas => {
          let url = canvas.toDataURL("image/png");
          this.htmlUrl = url;
          // 把生成的base64位图片上传到服务器,生成在线图片地址

        });
      },

    },
    mounted() {
      // console.log(this.$store.state.name);
      this.barPhoto();
    },

  }
</script>

<style>

</style>

以下是相关功能（上传，下载）：

如果你想下载刚才的截图:

第一步:有一个点击下载的标签:

点击下载

第二步:调用方法即可:
//下载图片
  private downloadCodeImg() {
    console.log("下载图片");
    var a = document.createElement("a");
    a.download = name ||"图片"; // 设置图片地址
    a.href = this.htmlUrl;
    a.click();
  }

图片上传服务器:

private 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: formData
    }).then(res => {
      if (res.code && res.data) {
        return;
      }
    });
  }