vue html2canvas生成海报功能

一、安装这两个插件

npm install  qrcodejs2 --save     //二维码
npm install --save html2canvas@1.0.0-rc.4（npm install --save html2canvas ） //安装html2canvas

问题：html2canvas在IOS13.4.1系统中调用失败
解决方案：版本降低为【1.0.0-rc.4】
版本降低方法：
1.首先移除 html2canvas 【npm uninstall html2canvas】
2.然后安装指定版本 【npm install --save html2canvas@1.0.0-rc.4】

二、template部分

<template>
  <!-- 海报html元素 -->
  <div id="posterHtml" :style="{backgroundImage: 'url('+posterHtmlBg+')'}" >
    <div>{{posterContent}}</div>
    <!-- 二维码 -->
    <div class="qrcode"><div id="qrcodeImg"></div></div>
  </div>
</template>

三、script部分:

<script>
  import QRCode from 'qrcodejs2'
  import html2canvas from 'html2canvas'
  export default {
    data() {
      return {
        posterContent: '', // 文案内容
        posterHtmlBg: require('../../assets/images/poster/poster_bg.jpg'), // 背景图
        posterImg: '', // 最终生成的海报图片
      }
    },
  }
</script>

四、合成二维码图片

methods: {
    createQrcode(text) {
      // 生成二维码
      const qrcodeImgEl = document.getElementById('qrcodeImg')
      qrcodeImgEl.innerHTML = ''
      let qrcode = new QRCode(qrcodeImgEl, {
        width: 256,
        height: 256,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
      qrcode.makeCode(text)
    },
}

五、将html元素转换成海报图片

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

六 、过程中可能会遇到的问题

结果：设置无效