html2canvas截图

1.下载

npm install --save html2canvas

2.main.js引入

import html2canvas from 'html2canvas'
Vue.prototype.$html2canvas = html2canvas

1

3-1.实际使用：如图我想把这个vue标志截图下来，需要用ref先获取节点元素

 <img src="../assets/logo.png" alt="" ref="testPng">

3-2.backgroundColor是截图标签的背景，也可不写。成功之后我是把图片转成base64传给后台的。

this.$nextTick(() => {
           this.$html2canvas(this.$refs.testPng, {
              backgroundColor: 'pink'
           }).then((canvas) => {
             // 转成base64位传给后台
             let dataURL = canvas.toDataURL("image/png")
             this.imgSrc = dataURL
           })
         })

3-3.我保存下来放在img标签里，this.imgSrc

<img :src="imgSrc" alt="" style="width: 200px;height: 200px;">

<script>
  // npm install --save html2canvas
    export default {
        data() {
            return {
              imgSrc:''
            }
        }

小问题：页面中有用到两行省略的标签，在截图中就不显示了，一行省略是可以的。