vue 把后端返回的圖片和url鏈接生成的二維碼用canvas 合成一張圖片

H5 頁面在做某個活動的時候，有兩種分享方式，一種是鏈接分享，一種是圖片分享。

鏈接分享的話，如果是在微信里，就可引導用戶利用微信瀏覽器自帶的分享，根據sdk設置分享標題簡介鏈接縮略圖即可。

圖片分享的話，一定是要有個二維碼，通過識別二維碼來進去活動地址，但有時候這個地址是后端返回的，可能會變化的地址，

所以用的話肯定不能用固定的二維碼，而是需要動態生成二維碼，合成到分享海報上

 

用到的生成二維碼的工具是 qrcode.js 

npm install qrcode --save

合成圖片展示到頁面（因為要識別二維碼，所以最后的展示要用 img 而不用canvas）

<template>
<div>
  <img :src="final_img" class="result-img" v-if="final_img" />
  <div class="result-img" v-else>
      <canvas id="my_canvas" width="650" height="750"> 
  </canvas>
  </div>
</div>
</template>

<script>
var QRCode = require('qrcode')
export default {

data () {
    return {
      result_img: '',
      final_img: ''
    }
  },
methods: {
    async generateQR (text) {
      return QRCode.toDataURL(text)
    }
  },
created () {
      let that = this// 根據地址生成二維碼
      that.generateQR(share.location_url).then(res => {
        let canvas = document.getElementById('my_canvas')
        let ctx = canvas.getContext('2d')
        let img1 = new Image()
        let img2 = new Image()
        // 處理跨域
        img1.crossOrigin = 'anonymous'
        img2.crossOrigin = 'anonymous'
        img1.src = that.result_img // 背景圖路經
        img2.src = res // 生成的二維碼base64
        img1.onload = function () {
          ctx.drawImage(img1, 0, 0, 650, 750) // 背景圖載入畫板
          ctx.drawImage(img2, 510, 610, 120, 120)
          that.final_img = canvas.toDataURL('image/jpeg', 0.5)
        }
      })
  }
}
</script>

 

done