Tạo QR Code với HTML5 - JavaScript

Chủ nhật - 31/03/2019 00:48
In ra
Đóng cửa sổ này

Hướng dẫn tạo mã QR với JavaScript, Canvas, HTML5, tương thích với tất cả các web-browser hiện đại. Cách hiện thực này không tốn kém quá nhiều năng lực của web-server.

QR Code với JavaScript
Cài đặt
Download qrcode.min.zip và giải nén được file qrcode.min.js up load file này lên web-server của bạn (bạn có thể download từ website gốc của nhà phát triển Sangmin Shim tại https://github.com/davidshimjs/qrcodejs
Tại tag head trong phần html, bạn hãy load script vào như cách ta load 1 file javascript vào file html. Lưu ý dòng số 1, do sử dụng HTML5 Canvas để vẽ QR Code nên ta cần thông báo cho trình duyệt biết phiên bản HTML ta đang sử dụng là HTML5 <!DOCTYPE HTML>.

    <!DOCTYPE html>
    <html>
    	<head>
    		<script type="text/javascript" src="/qrcode.min.js">
    	</head>
    	<body>
    	...
    	</body>
    </html>

Tại vị trí trong tag body, bất kể ở đâu mà ta muốn mã QR sẽ hiện lên, ta sẽ đặt tag sau

<div id="id_qrcode"></div>

Ví dụ (xem dòng số 9)

    <!DOCTYPE html>
    <html>
    	<head>
    		<script type="text/javascript" src="qrcode.min.js"></script>
    	</head>
    	<body>
    	<h1>Hien thi QR Codes boi Stdio</h1>
    	<p>
    		<div id="id_qrcode"></div>
    	</p>
    	</body>
    </html>

Tạo QR Codes
Sau khi trang được load xong (onload) bạn có thể gọi thực thi việc tạo QR Code với nội dung mong muốn

    var qrcode = new QRCode("id_qrcode", {
    	text:"www.stdio.vn",
    	width:100,
    	height:100,
    	colorDark:"#000000",
    	colorLight:"#ffffff",
    	correctLevel:QRCode.CorrectLevel.H
    });

Bạn có thể thay thế dòng số 2 với nội dung www.stdio.vn thành nội dung mà bạn muốn. Bạn cũng có thể thay đổi kích thước width, height như mong muốn.
Tham khảo
https://github.com/davidshimjs/qrcodejs - 31/3/2015
Download demo hoàn chỉnh DOWNLOAD QR_CODE_DEMO.zip

Bổ xung hàm lấy thông tin từ dường dẫn URL. có thể áp dụng trong việc lấy dữ liệu do qrcode tạo ra bằng method GET


<!----------ham lay tham so duong dan trang web begin------>
		var getUrlParameter = function getUrlParameter(sParam) {
		var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;
		for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};
<!----------ham lay tham so duong dan trang web end------>
var name = getUrlParameter('name');
var pass = getUrlParameter('pass');

PHAN MEM THIEN HA

Tạo QR Code với HTML5 - JavaScript