共计 1505 个字符，预计需要花费 4 分钟才能阅读完成。
功能需求:
海报有 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, 前端开发等模块, 专注于程序开发中的技术、经验总结与分享, 欢迎访问.