Hướng dẫn tạo QR Code với jQuery

QR CODE LÀ GÌ

QR Code là viết tắt của Quick response code (tạm dịch "Mã phản hồi nhanh"), QR code còn có tên gọi nữa là mã vạch ma trận (matrix-barcode), là dạng mã vạch hai chiều (2D) có thể được đọc bởi một máy đọc mã vạch hay smartphone (điện thoại thông minh) có chức năng chụp ảnh (camera) với ứng dụng chuyên biệt để quét mã vạch.

Bạn có thể tìm trên kho ứng dụng Apple Store hay Android Market từ khóa "QR scanner" hoặc “QR Reader” để tải ứng dụng quét QR Code cho iPhone hay smartphone dùng Android. Nhiều dòng điện thoại di động của Nokia và BlackBerry đã cài đặt sẵn ứng dụng đọc mã QR.

TẠO QR CODE BẰNG JAVASCRIPT

jQuery.qrcode là một plugin của jquery cho phép bạn nhúng QR code vào trong website của mình. QR code được tạo ra bằng cách sử dụng canvas, image hoặc div. Với các trình duyệt cũ, có thể sử dụng div hoặc image để có sự tương thích tốt nhất.

THUỘC TÍNH KHỞI TẠO

{
 // render method: 'canvas', 'image' or 'div'
 render: 'canvas',

 // version range somewhere in 1 .. 40
 minVersion: 1,
 maxVersion: 40,

 // error correction level: 'L', 'M', 'Q' or 'H'
 ecLevel: 'L',

 // offset in pixel if drawn onto existing canvas
 left: 0,
 top: 0,

 // size in pixel
 size: 200,

 // code color or image element
 fill: '#000',

 // background color or image element, null for transparent background
 background: null,

 // content
 text: 'no text',

 // corner radius relative to module width: 0.0 .. 0.5
 radius: 0,

 // quiet zone in modules
 quiet: 0,

 // modes
 // 0: normal
 // 1: label strip
 // 2: label box
 // 3: image strip
 // 4: image box
 mode: 0,

 mSize: 0.1,
 mPosX: 0.5,
 mPosY: 0.5,

 label: 'no label',
 fontname: 'sans',
 fontcolor: '#000',

 image: null
}

HƯỚNG DẪN SỬ DỤNG

1. Thêm vào trong thẻ HEAD của bạn

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script src='https://cdn.rawgit.com/lrsjng/jquery-qrcode/v0.9.5/dist/jquery.qrcode.min.js'></script>

2. Thêm một container để gắn QR Code vào

<div id="container"></div>

3. Gọi hàm để vẽ QR Code

$('#container').qrcode({
  "render": "div",
  "width": 100,
  "height": 100,
  "color": "#3a3",
  "text": "Welcome to Web68"
});

DEMO

See the Pen qrcode with jquery by Thanh Nguyen (@genievn) on CodePen.

Recent Post