Vue生成分享海报(含二维码)

功能需求:

• 海报有1张背景图, 海报上的文案内容动态变化
• 分享链接做成二维码, 放在背景图的固定位置上
• 在微信环境里, 海报可长按保存或转发

整体实现流程:

1. 按海报样式设计好html元素的页面布局, 包括背景图,文本,以及二维码图片的位置
2. 使用 qrcodejs2库 将分享链接合成二维码图片,赋值到html中的二维码元素上
3. 使用 html2canvas库 将html元素整体转换成一张海报

使用的第三方库:

• qrcodejs2 (合成二维码)
• html2canvas (html元素转换为图片)

下面是具体实现步骤:

一、设计html元素布局

template部分

script部分:

二、合成二维码图片

methods: {
    createQrcode(text) {
      // 生成二维码
      const qrcodeImgEl = document.getElementById('qrcodeImg')
      qrcodeImgEl.innerHTML = ''
      let qrcode = new QRCode(qrcodeImgEl, {
        width: 256,
        height: 256,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
      qrcode.makeCode(text)
    },
}

三、将html元素转换成海报图片

methods: {
    createPoster() {
      // 生成海报
      const vm = this
      const domObj = document.getElementById('posterHtml')
      html2canvas(domObj, {
        useCORS: true,
        allowTaint: false,
        logging: false,
        letterRendering: true,
        onclone(doc) {
          let e = doc.querySelector('#posterHtml')
          e.style.display = 'block'
        }
      }).then(function(canvas) {
        // 在微信里,可长按保存或转发
        vm.posterImg = canvas.toDataURL('image/png')
      })
    },
}

注意
添加html2canvas对象的onclone方法是为了 生成一个复制的虚拟组件，设置为显示，即可获取进行绘制，且虚拟组件不会显示在页面上.

福利
本文已同步到我的个人技术网站 IT干货-sufaith 该网站包括Python, Linux, Nodejs, 前端开发等模块, 专注于程序开发中的技术、经验总结与分享, 欢迎访问.