Vue生成分享海报(含二维码)

本文已同步到专业技术网站 www.sufaith.com, 该网站专注于前后端开发技术与经验分享, 包含Web开发、Nodejs、Python、Linux、IT资讯等板块.

功能需求:

• 海报有1张背景图, 海报上的文案内容动态变化
• 分享链接做成二维码, 放在背景图的固定位置上
• 在微信环境里, 海报可长按保存或转发

整体实现流程:

• 按海报样式设计好html元素的页面布局, 包括背景图,文本,以及二维码图片的位置
• 使用 qrcodejs2库 将分享链接合成二维码图片,赋值到html中的二维码元素上
• 使用 html2canvas库 将html元素整体转换成一张海报

使用的第三方库:

• qrcodejs2 (合成二维码)
• html2canvas (html元素转换为图片)

下面是具体实现步骤:

一、设计html元素布局

template部分

<template>
  <!-- 海报html元素 -->
  <div id="posterHtml" :style="{backgroundImage: 'url('+posterHtmlBg+')'}" v-show="false">
    <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/invite_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')
      })
    },
}

注意: 添加html2canvas对象的onclone方法是为了 生成一个复制的虚拟组件，设置为显示，即可获取进行绘制，且虚拟组件不会显示在页面上.