使用html2canvas将HTML内容写入Canvas生成图片

html2Canvas是一个比较成熟的开源库，它能将DOM直接转为Canvas，省去了使用原生Canvas需要一点一点去绘制的过程。
缺点：它并不支持所有的css属性，详情可以参考官方文档:https://html2canvas.hertzen.com/features/

安装

npm
npm install --save html2canvas

yarn
yarn add html2canvas

引入

import html2canvas from 'html2canvas' // 引入html2canvas

使用

 <div id="qr-section" class="qr-section">
         <!需要使用html2canvas绘图的html部分---->
          <vue-qr ref="qrCode" :text="text" width="100" height="100" :logoSrc="logoPath"></vue-qr>
          <span class="num">{{ text }}</span>
 </div>

toImage(){
      window.pageYoffset = 0
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0

      const canvasBox = document.getElementById('qr-section')
      // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
      html2canvas(canvasBox，{}).then(canvas => {
      // 获取图片url
        const dataURL = canvas.toDataURL('image/jpg')
        if(dataURL ){
          // 下载
        })

常见参数配置项

_R8XPT_ZO{DHRI%A8OH)E0G.png

来源：https://juejin.cn/post/7044178791878361118