Vue生成分享海报

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

本文已同步到专业技术网站 www.sufaith.com, 该网站专注于前后端开发技术与经验分享, 包含Web开发、Nodejs、Python、Linux、IT资讯等板块.

功能需求:

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

整体实现流程:

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

使用的第三方库:

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

下面是具体实现步骤:

一、设计html元素布局

template部分

<template>

  <!-- 海报html元素 -->

  <div id="posterHtml" :style="{backgroundImage: 'url('+posterHtmlBg+')'}" v-show="false">

  <div>{{posterContent}}</div>

  <!-- 二维码 -->

  <div class="qrcode"><div id="qrcodeImg"></div></div>

  </div>

</template>

script部分:

<script>

  import QRCode from 'qrcodejs2'

  import html2canvas from 'html2canvas'

  export default {

    data() {

      return {

      posterContent: '', // 文案内容

      posterHtmlBg: require('../../assets/images/poster/invite_poster_bg.jpg'), // 背景图

      posterImg: '', // 最终生成的海报图片

    }

  },

}

</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, 前端开发等模块, 专注于程序开发中的技术、经验总结与分享, 欢迎访问.