jQuery二維碼

時間 2020-05-07

標籤 jquery 二維欄目 JQuery 简体版

原文原文鏈接

如今二維碼很火，由於他能夠很方便的貼到任何地方，只要掃一掃就能夠看到二維碼的內容javascript

okhtml

廢話少說，上代碼java

這個二維碼基於jquery和jquery.qrcode插件jquery

因此使用前先引入git

<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<script type="text/javascript" src="js/jquery.qrcode.js" ></script>

給一個github的地址，能夠經過github下載demo：github

https://github.com/Lucasli2018/jquery-qrcode.git

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
		<script type="text/javascript" src="js/jquery.qrcode.js" ></script>
        <script type="text/javascript" src="js/qrcode.js" ></script> 
        <script type="text/javascript" src="js/utf.js" ></script>
		 <p>Render in table</p>
		 <div id="qrcodeTable"></div>
		 <p>Render in canvas</p>
		 <div id="qrcodeCanvas"></div>
		 <script> 
		    jQuery('#qrcodeTable').qrcode({
		         render    : "table",                <!--二維碼生成方式 -->
		         text    : "http://www.baidu.com" , <!-- 二維碼內容  -->
		         width : "200",               //二維碼的寬度
                 height : "200",
		     });    
		     jQuery('#qrcodeCanvas').qrcode({
		     	 render    : "canvas",
		         text    : "http://www.baidu.com",
		         width : "200",               //二維碼的寬度
                 height : "200",              //二維碼的高度
                 background : "#ffffff",       //二維碼的後景色
                 foreground : "#000000",        //二維碼的前景色
                 src: 'img/gray.jpg'             //二維碼中間的圖片
		     });    
		 </script>
		 </body>
</html>

效果：canvas