根據URL地址生成二維碼

韓師學子--胖佳發表於2019-04-05

 

                     根據URL地址生成二維碼


前提：之前用了別人網站的api來實現生成二維碼，亮哥說不行，這樣太依賴別人的，真的實現不了才這麼做。
這次，我就選擇了別人開源的檔案進行呼叫，只要載入一個小js檔案，再用它的語法即可。 

 

下載qrcodejs URL:http://davidshimjs.github.io/qrcodejs/

在頁面中引用jq和qrcodejs兩個檔案

html頁面

<html>
	<head>
		<title>demo</title>
	</head>
	
	 <script type="text/javascript" src="./js/jquery.js"></script>
	 <script type="text/javascript" src="./js/qrcode.min.js"></script>
	
	 
	<body>

		<div id="qrcode"></div>

        <input type="button" value="按鈕" id="hit"/>

	</body>
	<script type="text/javascript">
   	var qrcode = new QRCode("qrcode", {  
	    text: 'http://www.baidu.com',   //URL地址
		width: 260,
		height: 260,
		colorDark: '#000',    //二維碼顏色
		colorLight: "#ffffff"  //背景顏色
    });
    $('#hit').click(function(){
    	 qrcode.clear(); // clear the code.
         qrcode.makeCode("http://naver.com"); // make another code.
    });
   

   </script>
</html>

 

"qrcode" 為一個標籤的id，執行後會在標籤中插入一個cansave和img標籤

img的src為 base64值

相關文章