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

vue

引入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生成页面截图并上传 的全部内容, 来源链接: utcz.com/z/380873.html

回到顶部