html2canvas实战应用

http://html2canvas.hertzen.com/ --->官网

在Vue项目中使用：

npm install --save html2canvas

在需要的页面里去引入

import html2canvas from 'html2canvas'

设置了一个按钮，给了一个click事件，点击按钮去获取你要截图的div或者其他dom

<div class="center">
   <div id="qrcode">
     <div style="float: left">123</div>
     <img src="@/assets/cantactUs/tu1.png" width="300" alt="">
   </div>
   <el-button @click="download">点击截图</el-button>
</div>

 获取要截图的div，后面的对象是给canvas做一些设置，具体可以参考官网文档。

then之后我是拿到canvas的节点，生成了一个base64，赋值给a的href，模拟点击事件进行下载

download() {
      html2canvas(document.querySelector('#qrcode'), { height: 330, width: 330 }).then((canvas) => {
        // document.querySelector('.center').appendChild(canvas)
        const img = canvas.toDataURL('image/png')

        var url = img
        let a = document.createElement('a')
        let ck = new MouseEvent('click')
        a.download = 'qrcode'
        a.href = url
        console.log(a)
        a.dispatchEvent(ck)
      })
    }

点击按钮 

 点击截图你就会的得到一个和你设置canvas宽高一样的图片下载到本地

 

ok成功！