qrcode+ html2canvas 制作二维码与海报的合并

功能需求

分享的海报包含生成的二维码

思路

第一步、根据自己的分享链接生成一张二维码；
第二步、结合一张海报合成带分享二维码的海报

代码

    <!--二维码带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")
                            });
                        })
                    })
                }