調用 js 生成圖片二維碼

一、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; }

　　（調試的過程中層因為緩存問題而沒有顯示出想要的效果）