1. 程式人生 > >QRCodeJS二維碼網頁生成工具qrcode.js

QRCodeJS二維碼網頁生成工具qrcode.js

QRCode.js是一個二維碼生成javascript庫;支援跨瀏覽器的HTML5 Canvas和表格標籤的DOM操作;並且不依賴其它的庫或拓展。

網站截圖:

JS網盤下載地址:https://pan.baidu.com/s/1RiDK5uajhsB2N7j3rTjPLA

使用示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>COPY TEST</title>
<meta name="viewport"
	content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

</head>

<body>
	該頁面測試,H5點選複製
	<br>

	<button id="copy" data-clipboard-action="copy">點選複製</button>
	<br>
	<div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>
</body>
<script src="asset/self/js/jquery-1.11.0.js"></script>
<script src="asset/self/js/clipboard.min.js"></script>
<script src="asset/self/js/qrcode.js"></script>

<script>
	var clipboard = new ClipboardJS('#copy', {
		// 點選copy按鈕,直接通過text直接返回影印的內容
		text : function() {
			return '複製內容to be or not to be';
		}
	});

	clipboard.on('success', function(e) {
		alert(JSON.stringify(e));
		console.log(e);
	});

	clipboard.on('error', function(e) {
		alert(JSON.stringify(e));
	});
</script>
<script type="text/javascript">
	// qrcode:1.簡單方式
	new QRCode(document.getElementById('qrcode'), 'your content');
					// qrcode:2.設定引數方式,最後一個引數是精確度,H為高
var qrcode = new QRCode("test", {
    text: "http://jindo.dev.naver.com/collie",
    width: 128,
    height: 128,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});
//and you can use some methods
//qrcode.clear(); // clear the code.
//qrcode.makeCode("http://naver.com"); // make another code.
</script>
</html>

執行效果截圖:

GitHub地址:https://github.com/davidshimjs/qrcodejs

官網地址:https://davidshimjs.github.io/qrcodejs/