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

sufaith發表於2019-03-28
Vue

Vue生成分享海報(含二維碼)-www.sufaith.com

本文已同步到專業技術網站 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方法是為了 生成一個複製的虛擬元件，設定為顯示，即可獲取進行繪製，且虛擬元件不會顯示在頁面上.

相關文章