vue项目中使用html2canvas生成图片 vue技术交流群（864583465)

vue项目中使用html2canvas生成图片 vue技术交流群（864583465)

1、安装html2canvas插件

npm install --save html2canvas

2、页面代码

<template>
  <div id="html2canvasTest">
    <button @click="createImg">下载图片</button>
    <div id="dom-to-img-wrapper">
      <h1>125464531213123</h1>
      <h2>fgdgdfg</h2>
      <h3>f45rtrftf45f4g</h3>
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
export default {
  data() {
    return {}
  },
  created() {

  },
  methods: {
    createImg() {
      let domName = 'dom-to-img-wrapper'
      let imageDom = document.getElementById(domName)
      html2canvas(imageDom, {
        width: document.getElementById(domName).offsetWidth,  // canvas画板的宽度 一般都是要保存的那个dom的宽度
        height: document.getElementById(domName).offsetHeight,  // canvas画板的高度  同上
        scale: 1
      }).then((canvas) => {
        let base64Url = canvas.toDataURL('image/png', 1);
        this.fileDownload(base64Url)
      })
    },
    fileDownload(downloadUrl) {
      let aLink = document.createElement('a');
      aLink.style.display = 'none';
      aLink.href = downloadUrl;
      aLink.download = '图片名称.png';
      // 触发点击-然后移除
      document.body.appendChild(aLink);
      aLink.click();
      document.body.removeChild(aLink);
    }

  }
}
</script>

<style lang="scss">
    #html2canvasTest {

    }
</style>

3、说明
（1）html2canvas官方文档
（2）如果对下载的图片宽高大小无要求，则可以直接在上面的代码基础上进行更改，否则可以给要生成图片的那个dom设置一个高度和宽度，具体问题具体分析。
（3）该插件会严格按照dom的实际显示内容转化成图片，因此，建议转化成图片前可以先查看一下转化的效果再进行下一步操作
（4）该插件在h5页面可能会有一些未知问题，建议多分析分析，最终都会解决的
（5）欢迎留言，一起解决！！！

PS：欢迎加入vue技术交流群（864583465）进行更多问题的探讨，你的问题将是我们大家共同进步的关键