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