STDIO
Tìm kiếm gần đây
    Mục lục
    Thảo luận
    0
    Liên kết
    QR Code

    Tạo QR Code với HTML5 - JavaScript

    Hướng dẫn tạo QR Code với JavaScript, Canvas, HTML5, tương thích các trình duyệt web hiện đại.
    21/08/2014
    07/08/2020
    2 phút đọc
    Tạo QR Code với HTML5 - JavaScript

    QR Code là gì?

    QR Code (Quick Response Code) cũng như mã vạch, lưu trữ các thông tin thông qua một hình ảnh. Từ đó dùng các thiết bị có khả năng đọc mã và phân tích thông tin trên mã để trả về các thông tin.

    Bài viết hướng dẫn tạo QR Code với thư viện JavaScript tích hợp vào website, tạo ra các tiện ích cho người dùng.

    Hiện tại QR Code được ứng dụng rất nhiều, vì sự nhanh chóng đáp ứng của nó. Ví dụ sử dụng điện thoại muốn truy cập vào website bán một món hàng để tra cứu thông tin, thay vì phải gõ một đường dẫn rất dài trên điện thoại, các hãng có thể cung cấp 1 QR Code dán lên sản phẩm là đường dẫn đến trang web.

    QR Code và xu hướng thời đại

    Smartphone xuất hiện làm cho nhiều người biết về QR Code do sự tiện lợi, nhu cầu  sử dụng rất cao trong việc nhập, xuất với Smartphone cần được giảm thiểu, QR Code trở thành lựa chọn rất tốt (mã vạch thông thường chỉ lưu số, còn QR Code có thể lưu các kí tự).

    Trong một hội thảo, thay vì yêu cầu khách hàng truy cập vào một website thuộc công ty, sẽ rất mất thời gian cho người dùng nhập đường dẫn, thay vì vậy, đưa ra một QR Code, ngoài tính tiện lợi còn làm họ tăng tính tò mò.

    QR Code móc khóa InterNOT
    QR Code

    QR Code với JavaScript

    Cài đặt

    Download qrcode.min.zip và giải nén được file qrcode.min.js tải file này lên hosting. Có thể tải file gốc từ nhà phát triển Sangmin Shim.

    Tích hợp:

    Trong tag <head>, khai báo đường dẫn đến qrcode.min.js.

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

    Trong tag body, đặt tag sau tại vị trí muốn hiển thị QR Code.

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

    Cụ thể:

    <!DOCTYPE html>
    <html>
    	<head>
    		<script type="text/javascript" src="qrcode.min.js"></script>
    	</head>
    	<body>
    	<h1>Demo QR Code</h1>
    	<p>
    		<div id="id-qrcode"></div>
    	</p>
    	</body>
    </html>

    Tạo QR Codes

    Trong sự kiện onload của <body> gọi hàm tạo QR Code hoặc gọi trong các sự kiện cần thiết.

    var qrcode = new QRCode("id_qrcode", {
    	text:"https://www.bugs.vn/store/products/moc-khoa-visual-studio",
    	width:200,
    	height:200,
    	colorDark:"#000000",
    	colorLight:"#ffffff",
    	correctLevel:QRCode.CorrectLevel.H
    });
    • text: nội dung cần tạo QR Code.
    • width, height: độ rộng, cao của QR Code.
    • colorDark: màu của mã.
    • colorLight: màu nền.
    • correctLevel: khả năng sửa mã, có 4 cấp độ là L (7%), M (15%), Q (25%), H (30%). Khả năng càng cao, ảnh càng phức tạp và đọc lâu hơn, thông thường cấp độ M được dùng nhiều.
    QR Code với JavaScript.

     

    Download demo hoàn chỉnh

    QRCodeDemo.zip

    Tham khảo

    • https://github.com/davidshimjs/qrcodejs
    JavaScript

    JavaScript

    STDIO Training - Đào tạo lập trình Frontend - Backend.

    Đề xuất

    Hướng Dẫn Tạo QR Code

    Hướng Dẫn Tạo QR Code

    Sử dụng công cụ tạo mã QR Code online miễn phí.

    BugsỨng dụng

    04/06/2015

    Cơ Bản Vẽ Trên <canvas> 2D Với HTML5

    Cơ Bản Vẽ Trên <canvas> 2D Với HTML5

    Giới thiệu HTML5 canvas, tạo đối tượng vẽ, các đường nét, hình chữ nhật, ...

    JavaScriptJavaScript Nâng Cao

    02/06/2014

    Khám phá thêm

    10 Thứ Bạn Có Thể Làm Với JavaScript

    10 Thứ Bạn Có Thể Làm Với JavaScript

    Giới thiệu 10 ứng dụng mà JavaScript với sự mạnh mẽ của nó có thể tạo ...

    JavaScriptKiến Thức

    06/04/2016

    Cài Đặt Cocos2d-js Và Tạo Project HelloWorld

    Cài Đặt Cocos2d-js Và Tạo Project HelloWorld

    Cocos2d là Engine phát triển game đa nền tảng không những trên mobile, ...

    Lập Trình GameCocos2d-x

    17/09/2015

    Tạo Menu Trượt Theo Khung Nhìn Trên Web

    Tạo Menu Trượt Theo Khung Nhìn Trên Web

    Tạo menu hoặc các phần tử có thể trượt theo thanh trượt của trình duyệt ...

    JavaScriptJavaScript Nâng Cao

    15/07/2014

    STML5 CF - STDIO HTML5 Compact Framework

    STML5 CF - STDIO HTML5 Compact Framework

    Bài viết giới thiệu sơ lược về STML5 CF - Framework hỗ trợ phát triển ...

    JavaScriptJavaScript Nâng Cao

    27/08/2015

    Đôi Mắt Dõi Theo Con Trỏ Chuột Với Thuần JavaScript

    Đôi Mắt Dõi Theo Con Trỏ Chuột Với Thuần JavaScript

    Tạo đôi mắt có thể dõi theo con trỏ chuột với JavaScript thuần (không ...

    JavaScriptJavaScript Nâng Cao

    12/09/2014

    RequireJS cho Người Mới Bắt Đầu

    RequireJS cho Người Mới Bắt Đầu

    Khái niệm, chức năng, cách module hoá JavaScript, cách tạo module với ...

    JavaScriptJavaScript Nâng Cao

    04/11/2017

    Trí Tuệ Nhân Tạo Trong Games - Phần 2: Thiết Kế AI Với FSM

    Trí Tuệ Nhân Tạo Trong Games - Phần 2: Thiết Kế AI Với FSM

    Bài viết hướng dẫn thiết kế AI với FSM phần II. Nội dung bao gồm việc ...

    Lập Trình GameKiến Thức Nâng Cao

    23/01/2015

    HTML - Phần 1: Cơ Bản Về HTML

    HTML - Phần 1: Cơ Bản Về HTML

    Các kiến thức cơ bản về HTML trong thiết kế web và tạo trang web đầu ...

    HTML Cheat SheetCăn bản

    20/10/2015

    STDIO
    Trang chính
    Công ty TNHH STDIO

    30, Trịnh Đình Thảo, Hòa Thạnh, Tân Phú, Hồ Chí Minh
    +84 28.36205514 - +84 942.111912
    developer@stdio.vn

    383/1 Quang Trung, Phường 10, Quận Gò Vấp, Hồ Chí Minh
    Số giấy phép ĐKKD: 0311563559 do sở Kế hoạch và Đầu Tư TPHCM cấp ngày 23/02/2012

    ©STDIO, 2013 - 2020