h5在微信生成分享海报（带二维码）

一、前言

人生处处是坑，最近做一个h5项目，弄这个海报很是头疼，来自萌新的无助。终于在访遍了n多个帖子，问了n个热心群友，自己顿悟之后写了出来

之前的需求是保存海报，但是在微信中根本是无法保存的，最后做成图片然后长按保存。

二、工具

1. qrcode.js生成二维码
2. html2canvas生成图片

三、实现思路

首先用qrcode生成二维码，然后拿到后台传的背景，接着把二维码放在背景的中央，

最后使用html2canvas截取包含二维码和背景的div，保存成功一张图片，把这个图片渲染出来，长按即可在微信分享、保存了

四、代码

//用qrcodejs生成二维码
createQrcode() {
this.qrcodeUrl = this.host + '/#/reg' + this.qrCodeInfo[0].url;
          let qrcode = new QRCode('qrcode', {
            width: 120,
            height: 120,
            text: this.qrcodeUrl, // 二维码地址
            colorDark: "#000",
            colorLight: "#fff",
            correctLevel: QRCode.CorrectLevel.H
})
}
//使用html2canvas生成海报
createPoster() {
        // 生成海报
        const vm = this
        const domObj = document.getElementById('box')
        html2canvas(domObj,{useCORS: true,logging: false,}).then(function(canvas) {
          // 在微信里,可长按保存或转发 posterImg 生成的海报路径
          vm.posterImg = canvas.toDataURL('image/png')
          vm.mask = true;
        })
      }

大功告成，是不是很简单，可是对于从未接触的萌新，可是耗费了一些功夫。