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;
        })
      }

大功告成，是不是很簡單，可是對於從未接觸的萌新，可是耗費了一些功夫。