一、安装这两个插件
npm install qrcodejs2 --save //二维码
npm install --save html2canvas@1.0.0-rc.4(npm install --save html2canvas ) //安装html2canvas
问题:html2canvas在IOS13.4.1系统中调用失败
解决方案:版本降低为【1.0.0-rc.4】
版本降低方法:
1.首先移除 html2canvas 【npm uninstall html2canvas】
2.然后安装指定版本 【npm install --save html2canvas@1.0.0-rc.4】
二、template部分
<template>
<!-- 海报html元素 -->
<div id="posterHtml" :style="{backgroundImage: 'url('+posterHtmlBg+')'}" >
<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/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')
})
},
}
六 、过程中可能会遇到的问题
结果:设置无效