使用vue实现HTML页面生成图片的方法

使用vue实现HTML页面生成图片的方法可以通过js的html2canvas库和canvas2image插件来实现。

一、安装所需依赖

可以通过npm安装html2canvas和canvas2image:

npm install html2canvas canvas2image --save

二、页面内引入依赖的JS库

在所需页面入口文件里面引入，并使其成为Vue的plugin：

import html2canvas from 'html2canvas'
import Canvas2Image from 'canvas2image'

Vue.use({
    install: function (Vue) {
        Vue.prototype.$html2canvas = html2canvas
        Vue.prototype.$canvas2image = Canvas2Image
    }
})

三、使用html2canvas来生成canvas图像

1. 添加Ref和点击事件

我们需要用到一个按钮来触发图片生成事件，可以在HTML代码中添加按钮并添加相应的点击事件：

<template>
  <div>
    <!-- 单击生成图片 -->
    <button @click="generatePic">生成图片</button>
    <!-- 图片区域 -->
    <div ref="picDom">
      <h2>HTML页面生成图片</h2>
      <p>这里是一些文字描述，演示用...</p>
      <div>
        <img src="./assets/logo.png" alt="">
      </div>
    </div>
  </div>
</template>

1. 编写Vue的methods方法

在Vue的methods方法中编写生成图片的代码：

methods: {
  // 生成图片方法
  generatePic() {
    // 传入需要截图的dom
    this.$html2canvas(this.$refs.picDom, {
      useCORS: true //解决跨域
    }).then(canvas => {
      // 返回图片dataURL，可传入img的src属性
      let imgUrl = this.$canvas2image.convertToPNG(canvas).src
      console.log(imgUrl)
    })
  }
}

使用这段代码，一个成功生成的图片的DataURL就存放在了 imgUrl 中。

三、使用虚拟DOM的方式在vue中实现页面动态生成图片

我们同样可以使用虚拟DOM生成图片，在Vue的mounted生命周期中实现。

1. 添加Ref和canvas

在模板区域中添加Ref和Canvas区域：

<template>
  <div>
    <!-- 添加vue组件 -->
    <MyComponent ref="myCmp"></MyComponent>
    <!-- 生成图片按钮 -->
    <button @click="generatePic">生成图片</button>
    <!-- canvas标签用来显示生成的图片 -->
    <canvas ref="canvas"></canvas>
  </div>
</template>

1. 在Vue的mounted周期方法中生成图片

在mounted周期方法中，首先使用 Vue.extend 创建一个Vue组件，在需要生成图片的dom上挂在Vue实例，最后按照上一步中的编码方式生成图片即可：

mounted() {
  this.createCmp()
},
methods: {
  // 创建Vue组件，并将dom挂载到实例中
  createCmp() {
    let cmp = Vue.extend(MyComponent)
    let vm = new cmp().$mount()
    this.$refs.container.appendChild(vm.$el)
  },
  //生成图片
  generatePic() {
    this.$html2canvas(this.$refs.container, {
      useCORS: true,
      width: this.$refs.container.clientWidth, //生成图片的宽度
      height: this.$refs.container.clientHeight, //生成图片的高度
      dpi: window.devicePixelRatio * 2, //生成图片的dpi，设置这个防止生成的图片过于模糊
    }).then(canvas => {
      console.log(canvas.toDataURL())
      let imgUrl = this.$canvas2image.convertToPNG(canvas).src
      this.$refs.canvas.style.display = 'block'
      // 绘制生成内容
      this.$refs.canvas.getContext('2d').drawImage(canvas, 0, 0)
      this.$refs.canvas.toBlob(blob => {
        let imgFile = new File([blob], 'demo.png', {
          // mime type
          type: 'image/png'
        })
        console.log(imgFile)
      })
    })
  }
}

这是一个使用Vue实现HTML页面生成图片的方法，可以根据自己的需要对代码进行更改，实现自己的效果。