STDIO
Tìm kiếm gần đây
    • Nội dung
    • QR Code
    • 0
    • 0
    • Sao chép

    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
    0 Bình luận
    JavaScript

    JavaScript

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

    Đề xuất

    Hướng Dẫn Tạo QR Code
    Sử dụng công cụ tạo mã QR Code online miễn phí.
    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, ...

    Khám phá

    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 ...
    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 ...
    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 ...
    Cài Đặt Cocos2d-js Và Tạo Project HelloWorld
    Cocos2d-x là Engine phát triển game được sử dụng khá rộng rãi, giúp việc ...
    Đô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 ...
    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 ...
    Socket.IO với Cocos2d-x
    Hướng dẫn cách tạo game mulitiplay với Cocos2d-x thông qua Socket.IO.
    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 ...
    Khi bạn nhấn vào liên kết sản phẩm do STDIO đề xuất và mua hàng, STDIO có thể nhận được hoa hồng. Điều này hỗ trợ STDIO tạo thêm nhiều nội dung hữu ích.. Tìm hiểu thêm.
    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