美文网首页Thinkphp
qrcode+ html2canvas 制作二维码与海报的合并

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

作者: 其实娥卟坏 | 来源:发表于2019-01-25 12:15 被阅读0次
    功能需求

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

    思路

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

    代码
        <!--二维码带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

    相关文章

      网友评论

        本文标题:qrcode+ html2canvas 制作二维码与海报的合并

        本文链接:https://www.haomeiwen.com/subject/jhsmjqtx.html