在Vue项目中使用html2canvas生成页面截图并上传

Posted shirliey

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在Vue项目中使用html2canvas生成页面截图并上传相关的知识,希望对你有一定的参考价值。

引入cnpm install html2canvas.

html代码

<!-- 把需要生成截图的元素放在一个元素容器里,设置一个ref -->
<div class="image_tofile" ref="imageTofile">
  <!-- 这里放需要截图的元素,自定义组件元素也可以 -->
</div>
<!-- 如果需要展示截取的图片,给一个img标签 -->
<img :src="htmlUrl">

 js代码

// 引入html2canvas

import html2canvas from ‘html2canvas‘

// 注册组件

data() {
  return {
    htmlUrl: ‘‘
  }
},
components: {
  html2canvas
},
methods: {
  // 页面元素转图片
  toImage() {
    // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
    html2canvas(this.$refs.imageTofile, {
      backgroundColor: null
    }).then((canvas) => {
      let url = canvas.toDataURL(‘image/png‘);
      this.htmlUrl = url;
      // 把生成的base64位图片上传到服务器,生成在线图片地址
      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) {
 
      }
    })
  }
}

  

以上是关于在Vue项目中使用html2canvas生成页面截图并上传的主要内容,如果未能解决你的问题,请参考以下文章

如何在vue中开启、禁止H5页面的上下拉动

vue中实现html页面导出word和pdf的办法

html2canvas截图的清晰度问题

关于H5页面中生成图片的两种方式!

Vue中 前端实现生成 PDF 并下载

前端HTML页面转PDF(html2canvas+jspdf)