jquery生成二維碼

weixin_33866037發表於2016-12-01
jQuery

最近在做微信開發，因為要使用到二維碼，所以選擇了jquery-qrcode外掛。今天和小夥伴們一起分享一下。

1.下載資源

官方下載地址：https://larsjung.de/jquery-qrcode/

2.怎麼使用

jquery-qrcode外掛的使用方法，可以說是比較簡單的。通過客戶端生成二維碼可以減少伺服器端的壓力，其次可以降低開發的人工成本。一舉兩得。示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>二維碼建立測試頁面</title>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery-qrcode-0.14.0.js"></script>
    <script language="JavaScript">
        $(function(){
            var options = {
                render: "canvas",
                ecLevel: 'H',//識別度
                fill: '#000',//二維碼顏色
                background: '#ffffff',//背景顏色
                quiet: 2,//邊距
                width: 200,//寬度
                height: 200,
                text: "http://www.baidu.com",//二維碼內容
                //中間logo start
                mode: 4,
                mSize: 20 * 0.01,
                mPosX: 50 * 0.01,
                mPosY: 50 * 0.01,
                image:$('#img-buffer')[0],//logo圖片
                //中間logo end
                label: 'jQuery.qrcode',
                fontname: 'Ubuntu',
                fontcolor: '#ff9818',
            };
            $('#container').empty().qrcode(options);
        })
    </script>
</head>
<body>
   <div id="code"></div>
   <div id="container">這裡是二維碼顯示位置</div>
   //預設圖片程式碼
</body>
</html>

<img id="img-buffer" src="1.jpg" hidden>，這段程式碼接在預設圖片程式碼的註釋那邊。

PS：是不是很簡單呢？趕快嘗試一下吧，親愛的小夥伴！

相關文章