生成海报图功能,在分享时比较常用到。使用 html2canvas
插件生成海报图片,而对于海报图中的二维码则采用的是 qrcodejs2
插件(使用方式就省略)
- 下载依赖
npm install html2canvas --S
对于海报图的结构等需要写好
<div id="pageHtml" class="pagePoster">
<img src="https://images.innocomn.com/97211202202091407163440.jpg" >
<h3>xx直播-为直播而生</h3>
<div>2022-02-07</div>
<div>上海市</div>
<div id="qrcodeEl"></div>
<div class="text">长按识别二维码,观看现场照片直播</div>
</div>
生成图片的方法
const vm = this
const domObj = document.getElementById('pageHtml')
html2canvas(domObj, {
useCORS: true,
allowTaint: false,
logging: false,
letterRendering: true,
onclone(doc) {
let e = doc.querySelector('#pageHtml')
e.style.display = 'block'
}
}).then(function(canvas) {
// 在微信里,可长按保存或转发
vm.posterImg = canvas.toDataURL('image/png')
vm.centerDialogVisible = true
})
- 效果