二維碼生成插件--QRcode.js

一、描述     

        二維碼又稱 QR Code，全稱是Quick Response Code

       github源碼位址下載下傳：https://github.com/jeromeetienne/jquery-qrcode

       描述： jquery.qrcode.js 是一個能夠在用戶端生成矩陣二維碼 QRCode 的 jquery 插件，使用它可以很友善的在頁面上生成二維條碼。此插件是能夠獨立使用的，體積也比較小，使用gzip壓縮後才不到4kb。因為它沒有圖像下載下傳的過程，不依賴于外部服務的打開和關閉，是以它可直接在用戶端實作快速生成的二維碼。它是基于一個用多種語言建構 QRcode 的庫。 jquery.qrcode.js 将其封裝起來，使其易于包含在您自己的代碼中。

   二維碼分析圖 度娘上找的

二、簡單使用

1. 導入 jquery.qrcode.min.js 和 jquery.js 檔案  

<script type="text/javascript" src="<%=basePath %>/js/jquery-3.3.1.min.js"></script>	<!-- 可加自己的jquery -->
<script type="text/javascript" src="<%=basePath %>/js/qrcode/jquery.qrcode.min.js"></script>
<script type="text/javascript">
	$(function(){
		$("#erm").qrcode("http://www.baidu.com");
	});	
</script>
           

2. 建立一個 DOM 元素 div 去包含生成的二維碼 

<div style="text-align: center;margin: 50px;" id="erm" >
</div>
           

3. 然後你在此容器中的添加 qrcode 方法 

<script type="text/javascript">
	$(function(){
		$("#erm").qrcode("http://www.baidu.com");
	});	
</script>
           

三、自定義參數配置

1. 參數配置

<script type="text/javascript">
    $(function(){
        $("#erm").qrcode({
            render : "canvas",  //設定渲染方式:table和canvas，使用canvas方式性能相對來說比較好
            width: 256,   //預設寬度
            height: 256, //預設高度            
            typeNumber: -1,   //計算模式一般預設為-1
            correctLevel: 2, //二維碼糾錯級别
            background: "#ffffff",  //背景顔色
            foreground: "#000000",  //二維碼顔色
            text: "http://www.baidu.com", //二維碼内容：可以直接填一個網址
        });
    });	
</script>
           

2. jquery.qrcode.js二維碼内容是不支援中文的，如果出現中文，結果就是一串亂碼，這個主要是兩者的編碼方式不一樣所導緻的，中文一般情況下是UTF-16格式，如果想要支援中文，使用 encodeURI() 進行轉碼 統一改成UTF-8格式的。 網上也有其他方式轉碼參考

$("#erm").qrcode(encodeURI("http://baidu.com/?id=10&name=中文"));//使用encodeURI進行轉碼
           

3. jquery.qrcode.js又不支援這種自定義logo，這時候腫麼辦呢？在div裡建立一個img利用定位很容易就可以搞定它

<div>
		<div style="text-align: center;margin: 50px;" id="erm" >
		</div>
		<div style="position:absolute; left:950px; top:180px; z-index:1;">
			<img  style ="width:35px;height:35px;" alt="" src="<%=basePath %>/image/default.jpg"/>
		</div> 
		<div style="text-align: center;">
			<label> 請用手機掃描二維碼并按提示繼續 </label>
		</div>
	</div>