功能需求
分享的海报包含生成的二维码
思路
第一步、根据自己的分享链接生成一张二维码;
第二步、结合一张海报合成带分享二维码的海报
代码
<!--二维码带LOGO的生成-->
<script src="js/qr-code-with-logo.browser.min.js"></script>
<!--html2canvas 页面截图-->
<script type="text/javascript" src="js/html2canvas.min.js"></script>
<!--body 里面的代码-->
<div id="app">
<p>长按保存我的专属推荐注册海报,再分享给好友</p>
<br />
<div class="cont" ref="box">
<div class="poster">
<img src="img/shareRegister.png" title="这是我的独门赚钱秘籍,快来了解下吧!。" width="100%" />
</div>
<div class="qrcode">
<image id="canvas"></image>
</div>
</div>
<img :src="imgUrl" alt="分享图">
</div>
//生成带二维码的海报实现方法
initQrcode() {
let that = this;
that.$nextTick(function() {
//生成二维码
QrCodeWithLogo.toImage({
image: document.getElementById('canvas'), // 换成你的canvas节点
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) {
// 微信内置浏览器 安卓不支持分享及保存该图片
//that.imgUrl = URL.createObjectURL(that.base64ToBlob(canvas.toDataURL("image/png")))
that.imgUrl = canvas.toDataURL("image/png")
});
})
})
}
image.png
网友评论