Vue 微信网页截图实现

项目需求：微信网页，点击实现网页截图效果。使用 html2canvas 实现。

具体实现如下：

1. 安装 html2canvas 1.0.0-rc.4 版本 （处理 Android 与 IOS 兼容问题）

yarn add html2canvas@1.0.0-rc4

2. 引入并使用

<template>
  <div id="home">
    <button @click="screenShot">截图</button>	
    <img :src="imageUrl" alt="" />
  </div>
</template>

<script>
import html2canvas from 'html2canvas'

export default {
  data () {
    return {
      imageUrl: ''
    }
  },
  methods: {
     // 截图
    screenShot () {
      html2canvas(document.querySelector('#home')).then(canvas => {
        this.imageUrl = canvas.toDataURL('image/png')
      })
    }
  }
}
</script>