jquery生成二维码

使用jquery.qrcode.min.js生成二维码

<div class="code-container">
        <div class="code" >
            <div class="mycode">
                <div id="code"></div>
            </div>
        </div>
        <div id="imagQrDiv"></div>//canvas转化为img后的存放容器，要覆盖在生成的code上面，或者将生成的img放到class='code'里面
    </div>

 .code-container{
        position:absolute;
        width:100%;
        height:100%;
        z-index:10;
        margin-top:-8px;
        margin-left:-8px;        
    }
    .code{
        width:138px;
        height:138px;

        position:absolute;
        left:50%;
        top:50%;
        transform:translateX(-50%);
        -webkit-transform: translateX(-50%) ;
        box-sizing: border-box;
        border:4px solid #fff;

    }

    .mycode{
        width:100%;
        height:100%;
    }

    #imagQrDiv{
        width:100%;
        height:100%;

        position:absolute;

        box-sizing: border-box;
        z-index:99999;
    }

 require ('./../../../static/js/jquery.min.js');
                require ('../../../static/js/jquery.qrcode.min.js');
                qrcode();
function qrcode () {
                $("#code").qrcode({
                    text: this.codeUrl,
                    width:130,
                    height:130
                });


                function convertCanvasToImage(canvas) {

                    var image = new Image();

                    image.src = canvas.toDataURL("image/png");
                    return image;
                }

                var mycanvas1=document.getElementsByTagName('canvas')[0];

                var img=convertCanvasToImage(mycanvas1);

                $(img).css({'width':'138px','height':'138px','position':'absolute','top':'50%','left':'50%','transform':'translateX(-50%)','boxSizing':'border-box','border':'4px solid #fff'});
                $('#imagQrDiv').append(img);
            }