生成海报图

  生成海报图功能，在分享时比较常用到。使用 html2canvas 插件生成海报图片，而对于海报图中的二维码则采用的是 qrcodejs2 插件(使用方式就省略)

• 下载依赖 npm install html2canvas --S

  对于海报图的结构等需要写好

  <div id="pageHtml" class="pagePoster">
    <img src="https://images.innocomn.com/97211202202091407163440.jpg" >
    <h3>xx直播-为直播而生</h3>
    <div>2022-02-07</div>
    <div>上海市</div>
    <div id="qrcodeEl"></div>
    <div class="text">长按识别二维码，观看现场照片直播</div>
  </div>

生成图片的方法

const vm = this
const domObj = document.getElementById('pageHtml')
html2canvas(domObj, {
  useCORS: true,
  allowTaint: false,
  logging: false,
  letterRendering: true,
  onclone(doc) {
    let e = doc.querySelector('#pageHtml')
    e.style.display = 'block'
  }
}).then(function(canvas) {
  // 在微信里,可长按保存或转发
  vm.posterImg = canvas.toDataURL('image/png')
  vm.centerDialogVisible = true
})

• 效果