调用 js 生成图片二维码

Posted 2021-02-12 成为自己最想成为的那种人

一、js 生成二维码：

　　首先，需要引用 jQuery 和 jquery.qrcode.js。然后：

            //生产二维码
            $("#qrcodeCanvas").qrcode({
                render: "canvas",    //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
                text: location.href,    //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
                width: "100",               //二维码的宽度
                height: "100",              //二维码的高度
                background: "#ffffff",       //二维码的后景色
                foreground: "#000000",        //二维码的前景色
                src: ‘‘             //二维码中间的图片
            });

　　或：（ASP.NET MVC）

        jQuery(‘#qrcode_app‘).qrcode({
            render: "canvas",
            text: ‘@(app_positionQr)‘,
            width: 100,
            height: 100,
            background: "#ffffff",       //二维码的后景色
            foreground: "#000000",        //二维码的前景色
            src: ‘‘
        });

二、调用：

                <ul class="xxx-firmhome-operationPic" style="float: right;  margin: 23px;
    text-indent: 2px;">
                    <!--分享举报收藏-->
                    <li class="wechat">
                        <a href="javascript:void(0);">小程序中打开</a>
                        <div class="pull"><img src="@wechat_QRCode"></div>
                    </li>
                    <li class="tjapp">
                        <a href="javascript:void(0);">app中打开</a>
                        <div class="pull"><div id="qrcode_app" class="qrcode"></div></div>
                    </li>
                </ul>

三、设置样式：

        .qrcode {
            display: block;
            width: 100px;
            height: 100px;
            border: 2px solid #ff8502;
            background-color: #fff;
            padding: 10px;
            margin-top: 10px;
        }

.xxx-firmhome-operationPic li.tjapp {position: relative;}
.xxx-firmhome-operationPic li.tjapp a{ background:url(../images/firmhome/comProfile-name-pic5.png) no-repeat left top;}
.xxx-firmhome-operationPic li.tjapp .pull { 
　　width: 120px; height: 130px; background:url(../images/firmhome/comProfile-top-operationPic-share-pic.png) no-repeat 82px top; position: absolute; right: -7px; top: 24px; display: none; z-index: 1; }

　　（调试的过程中层因为缓存问题而没有显示出想要的效果）