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

功能需求:

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

整体实现流程:

按海报样式设计好html元素的页面布局, 包括背景图,文本,以及二维码图片的位置
使用 qrcodejs2库将分享链接合成二维码图片,赋值到html中的二维码元素上
使用 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')       })     }, }

生成一个复制的虚拟组件，设置为显示，即可获取进行绘制，且虚拟组件不会显示在页面上.

IT干货-sufaith该网站包括Python, Linux, Nodejs, 前端开发等模块, 专注于程序开发中的技术、经验总结与分享, 欢迎访问.

文章来源: https://blog.csdn.net/weixin_39910802/article/details/88874319

标签

二维码