最近的项目开发中有这样一个需求：

1. 每个用户有一个邀请链接，通过这个邀请链接邀请其他人注册
2. 要将邀请链接做成一个二维码，并放到一个海报背景上
3. 分享邀请海报给被邀请人，扫描二维码注册

需求比较明确，这篇文章就来说下需求里面的第二步是如何实现的以及实现过程中需要注意的一些问题。

如何生成二维码

如今的社会中，二维码随处可见，其实二维码就是将一段文字信息用特定的算法规则计算之后以图片的形式展示出来。基于相同的规则，就可以制作和解析二维码，而不用局限于单纯的文字表现形式。

现在前端环境下，要生成二维码，可用的工具库有很多，我这里用的是 qrcode，首先安装

npm install --save qrcode

安装完之后 import 导入就能使用了

import QRCode from 'qrcode'

使用的话有二种方法可以达到生成二维码的效果

一，将生成的二维码通过 canvas 标签展示

	<canvas class="qr" id="qrCode-canvas"></canvas>

		let canvas = document.getElementById('qrCode-canvas')
        QRCode.toCanvas(canvas, this.qrCodeUrl, (error) => {
          if (error) {
            console.log(error)
          } else {
            canvas.style.width = '1.68rem'
            canvas.style.height = '1.68rem'
            });
          }
        })

二维码生成好后，有需要的话可以调整下 canvas 的大小等属性，因为 qrcode 生成的二维码会带有一些默认样式，需要调整下。

二，先通过 canvas 生成二维码，然后将 canvas 的内容转为 base64 格式以 img 标签展示

	<img class="qr" id="qr-img" :src="dataUrl" alt="邀请二维码"/>

		let img = document.getElementById('qr-img')
        let canvas = document.createElement('canvas')
        canvas.width = img.width
        canvas.height = img.height
        //用 canvas 对象和邀请链接生成二维码，并将生成的二维码转为 base64
        QRCode.toCanvas(canvas, this.qrCodeUrl, (error) => {
          if (error) {
            console.log(error)
          } else {
            this.dataUrl = canvas.toDataURL("image/jpeg")
            });
          }
        })

上面两种方式都可以生成二维码并显示在界面上，区别在于第一种是以 canvas 标签显示，在微信中长按是无法识别的。第二种是以 img 标签显示，在微信中长按会自动识别并可以直接以图片形式分享出去。

做到这一步，需求已经完成了一半，下一步就是按设计图要求把二维码定位到海报背景上，将二维码和海报合成为一张图片。之所以要合成为一张图片还是为了让用户在微信中操作方便。合成为一张图片后，用户在微信中直接长按合成后的海报就可以分享或者识别二维码。

合成海报时碰到的坑

合成海报时需要用到另一个工具库 html2canvas ，基本使用方法也很简单，先获取要合成图片的 dom 对象，然后调用 html2canvas ，它会返回一个 promise，里面的 canvas 就是合成后的图片信息，同样的，这里的 canvas 可以直接显示出来，也可以转成 base64 之后放到 img 标签里显示，但是为了分享或者下载方便，基本都是转成了 base64

			let poster = document.getElementById('poster')
            html2canvas(poster).then(canvas => {
              this.posterDataUrl = canvas.toDataURL()
            });

到这里，基本需求就完成了。然而世界上的事情往往都不会是一帆风顺的，在测试的时候发现出了问题。

我前面二维码是用上面说的第二种方法显示的，将二维码的 canvas 转成了 base64 显示在 img 标签上，再将这个二维码 img 和海报背景 img 合成。这样的实现方式在 iOS 和浏览器中都没有问题，然而在安卓版微信里面却是只有海报背景而没有二维码。

在查了N多资料和尝试了好多遍之后终于发现，是因为我的二维码是 base64 的，如果二维码是以 canvas 形式显示，再去合成海报，将合成后的海报转为 base64 就没有问题了。 所以我在前面写生成二维码的时候写了二种方法。至此，整个需求也就真正的完成了。

下面是完整代码

<template>
  <div class="ypl-flex">
    <mt-header title="邀请用户" go-back></mt-header>
    
    <div class="invitePosterPage flex">
      <p class="title">分享专属海报，邀请用户注册，即可成功邀请</p>
      <p class="remark">（注：只能通过此二维码注册用户才可成功邀请）</p>
      
      <img v-if="posterDataUrl" :src="posterDataUrl" class="poster-bg" alt="邀请海报"/>
      <div v-else id="poster" class="flex-row" style="position: relative">
        <img class="poster-bg" src="../../../assets/img/img_poster_bg.png" alt="邀请海报背景"/>
        <canvas class="qr" id="qrCode-canvas"></canvas>
      </div>
    </div>
  </div>
</template>

<script>
  /**
   * 这是邀请海报组件
   */
  import QRCode from 'qrcode'
  import html2canvas from 'html2canvas';
  
  export default {
    name: 'Poster',
    data () {
      return {
        posterDataUrl:'',
        qrCodeUrl: 'https://www.baidu.com'
      }
    },
  
    async mounted () {
    	this.createQRCode()
    },
    
    methods: {
      createQRCode () {
        //先用 QRCode 生成二维码 canvas，然后用 html2canvas 合成整张海报并转成 base64 显示出来
        let canvas = document.getElementById('qrCode-canvas')
        QRCode.toCanvas(canvas, this.qrCodeUrl, (error) => {
          if (error) {
            console.log(error)
          } else {
            //qrcode 生成的二维码会带有一些默认样式，需要调整下
            canvas.style.width = '1.68rem'
            canvas.style.height = '1.68rem'
            
            let poster = document.getElementById('poster')
            html2canvas(poster).then(canvas => {
              this.posterDataUrl = canvas.toDataURL()
            });
          }
        })
      }
    },
  }
</script>

这次做这个需求的过程中，查到了一些 html2canvas 的资料，有很多文章都提到 html2canvas 有一些坑，我是没碰到，现在将这些文章列出来，给需要的人。
html2canvas 用法详解
Html2canvas - 项目中遇到的那些坑点汇总(更新中…)
一次 H5 「保存页面为图片」 的踩坑之旅
微信H5实现网页长按保存图片及识别二维码
基于html2canvas实现网页保存为图片及图片清晰度优化
Vue.js结合Canvas制作二维码和图片的合成（qrcanvas + html2canvas）

然后就是 canvas 转 base64 的 .toDataURL()] 这个方法，这个方法里面其实是可以配置参数的，有需要的可以去看下这个文档
HTMLCanvasElement.toDataURL()