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

功能需求

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

思路

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

代码

    
长按保存我的专属推荐注册海报，再分享给好友
    

    

       

          
        
        

            
        
     
        

//生成带二维码的海报实现方法
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