1. 程式人生 > >jquery-qrcode 二維碼生成

jquery-qrcode 二維碼生成

jquery-qrcode-0.14.0.js下載
程式碼:

<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<script src="jquery-3.3.1.min.js"></script>
	<script src="jquery-qrcode-0.14.0.js"></script>
</head>
<body style="background-color:rgb(238,238,238)">
	<div id="container"><canvas width="400" height="400"></canvas></div>
</body>
<script>
	'use strict';

    var jq = window.jQuery;
	function updateQrCode() {
        var options = {
			//渲染方法: 'canvas', 'image' or 'div'
            render: 'canvas',
			//錯誤糾正等級: 'L', 'M', 'Q' or 'H'
            ecLevel: 'H',
			
            minVersion: 1,
			//二維碼 顏色或影象元素 只能接受16進位制的 顏色引數
            fill: '#000',
			//背景顏色或影象元素,NULL用於透明背景的 只能接受16進位制的 顏色引數
            background: '#fff',
            // fill: jq('#img-buffer')[0],
			// 如果在現有畫布上繪製畫素偏移
			left: 0,
			top: 0,
			// 生成二維碼的 URL 
            text: "https://www.baidu.com/",
            size: 200,
			//角半徑相對於模組寬度:0-0.5
            radius: 0.5,
			//二維碼顯示的 內邊距
            quiet: 1,
			 // modes :
			// 0: 正常 只顯示二維碼
			// 1: 標籤條
			// 2: 標籤盒
			// 3: 圖片條
			// 4: 圖片盒
            mode: 0,
			//modes 大小  相對於 size 的百分比
            mSize: 0.1,
			//modes 顯示位置
            mPosX: 0.5,
            mPosY: 0.5,
            label: '',//標籤內容
            fontname: "sans",//字型名稱
            fontcolor: '#000',//字型顏色
            image: null
        };

        jq('#container').empty().qrcode(options);
    }
	jq(updateQrCode);
</script>
</html>