Vue生成分享海報(含二維碼)

本文已同步到專業技術網站 www.sufaith.com, 該網站專一於先後端開發技術與經驗分享, 包含Web開發、Nodejs、Python、Linux、IT資訊等板塊.

功能需求:

• 海報有1張背景圖, 海報上的文案內容動態變化
• 分享連接作成二維碼, 放在背景圖的固定位置上
• 在微信環境裏, 海報可長按保存或轉發

總體實現流程:

• 按海報樣式設計好html元素的頁面佈局, 包括背景圖,文本,以及二維碼圖片的位置
• 使用 qrcodejs2庫 將分享連接合成二維碼圖片,賦值到html中的二維碼元素上
• 使用 html2canvas庫 將html元素總體轉換成一張海報

使用的第三方庫:

• qrcodejs2 (合成二維碼)
• html2canvas (html元素轉換爲圖片)

下面是具體實現步驟:

1、設計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>

2、合成二維碼圖片

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)
    },
}

3、將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方法是爲了 生成一個複製的虛擬組件，設置爲顯示，便可獲取進行繪製，且虛擬組件不會顯示在頁面上.