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’) }) },}注意: 添加html2canvas对象的onclone方法是为了 生成一个复制的虚拟组件，设置为显示，即可获取进行绘制，且虚拟组件不会显示在页面上.福利: 本文已同步到我的个人技术网站 IT干货-sufaith 该网站包括Python, Linux, Nodejs, 前端开发等模块, 专注于程序开发中的技术、经验总结与分享, 欢迎访问.