功能需求
分享的海報(bào)包含生成的二維碼
思路
第一步肮之、根據(jù)自己的分享鏈接生成一張二維碼钞护；
第二步影暴、結(jié)合一張海報(bào)合成帶分享二維碼的海報(bào)
代碼
<!--二維碼帶LOGO的生成-->
<script src="js/qr-code-with-logo.browser.min.js"></script>
<!--html2canvas 頁(yè)面截圖-->
<script type="text/javascript" src="js/html2canvas.min.js"></script>
<!--body 里面的代碼-->
<div id="app">
<p>長(zhǎng)按保存我的專屬推薦注冊(cè)海報(bào)舞痰，再分享給好友</p>
<br />
<div class="cont" ref="box">
<div class="poster">
<img src="img/shareRegister.png" title="這是我的獨(dú)門賺錢秘籍邀窃，快來了解下吧犬第！锦积。" width="100%" />
</div>
<div class="qrcode">
<image id="canvas"></image>
</div>
</div>
<img :src="imgUrl" alt="分享圖">
</div>
//生成帶二維碼的海報(bào)實(shí)現(xiàn)方法
initQrcode() {
let that = this;
that.$nextTick(function() {
//生成二維碼
QrCodeWithLogo.toImage({
image: document.getElementById('canvas'), // 換成你的canvas節(jié)點(diǎn)
content: 'https://cdn.blog.cloudself.cn/',
width: 100,
logo: {
src: 'https://cdn.blog.cloudself.cn/images/avatar.png',
},
nodeQrCodeOptions: {
margin: 1
}
}).then(_ => {
html2canvas(that.$refs.box).then(function(canvas) {
// 微信內(nèi)置瀏覽器 安卓不支持分享及保存該圖片
//that.imgUrl = URL.createObjectURL(that.base64ToBlob(canvas.toDataURL("image/png")))
that.imgUrl = canvas.toDataURL("image/png")
});
})
})
}
image.png
