Trang chủ Kiến Thức Công Nghệ QR Code là gì? Hướng dẫn Tạo và Đọc QR Code với TypeScript
Công Nghệ

QR Code là gì? Hướng dẫn Tạo và Đọc QR Code với TypeScript

Chia sẻ
QR Code là gì? Hướng dẫn Tạo và Đọc QR Code với TypeScript
Chia sẻ

1. QR Code là gì?

QR code (Quick Response code) là mã vạch ma trận hai chiều được phát triển bởi Denso Wave năm 1994, cho phép lưu trữ nhiều dữ liệu (hàng nghìn ký tự), quét được từ mọi góc độ và có khả năng chống lỗi cao. Được ứng dụng rộng rãi trong thanh toán, marketing và xác thực.

Khác với mã vạch truyền thống (1D), QR code sử dụng cấu trúc ma trận điểm (module)để lưu trữ dữ liệu, cho phép nó chứa lượng thông tin lớn trong một kích thước nhỏ, đồng thời đảm bảo quét chính xác ngay cả khi bị hư hỏng hoặc đặt trong điều kiện ánh sáng kém.

Một QR code tiêu chuẩn có thể chứa:

  • Tối đa 7.089 ký tự số
  • 4.296 ký tự chữ và số
  • 2.953 byte dữ liệu nhị phân
  • 1.817 ký tự Kanji/Kana

2. So sánh QR Code với Barcode

Đặc điểmQR CodeBarcode
Hướng quétQuét được từ mọi góc độ (360°)Chỉ quét được theo chiều ngang
Dung lượng dữ liệuLớn (hàng nghìn ký tự)Nhỏ (chỉ 10-20 ký tự)
Kích thướcNhỏ gọn, chứa được nhiều thông tinCần nhiều không gian hơn với cùng lượng thông tin
Khả năng chống lỗiCó thể đọc được khi 30% mã bị hỏngDễ bị lỗi khi mã bị hỏng
Loại dữ liệuĐa dạng (URL, văn bản, số, email…)Chủ yếu là số và một số ký tự đặc biệt
Quét bằngSmartphone, máy quét chuyên dụngMáy quét chuyên dụng
Ứng dụngĐa dạng (thanh toán, marketing, truy xuất…)Chủ yếu dùng trong bán lẻ và kho vận

3. Cấu trúc cơ bản của QR Code

QR code bao gồm các thành phần chính sau:

  • Finder Patterns : Ba hình vuông lớn ở ba góc của QR code. Các hình vuông này giúp máy quét xác định vị trí, kích thước và góc của QR code. Nhờ vậy, QR code có thể được quét từ bất kỳ góc độ nào, không cần phải thẳng hàng như mã vạch truyền thống.
  • Alignment Patterns : Các hình vuông nhỏ hơn phân bố trong QR code (thường nằm ở góc thứ tư và rải rác trong mã). Chúng giúp hiệu chỉnh độ cong hoặc biến dạng khi QR code được in trên bề mặt không phẳng hoặc khi máy ảnh không quét thẳng góc.
  • Timing Patterns : Các đường đứt đoạn gồm các module đen-trắng xen kẽ, chạy ngang và dọc giữa các Finder Patterns. Chúng giúp máy quét xác định vị trí chính xác của mỗi module trong QR code, đặc biệt khi mã bị méo hoặc kích thước thay đổi.
  • Version Information: Dành cho QR code từ phiên bản 7 trở lên, chứa thông tin về phiên bản của QR code. Phiên bản càng cao thì QR code càng lớn và chứa nhiều dữ liệu hơn (từ phiên bản 1 với 21×21 module đến phiên bản 40 với 177×177 module).
  • Format Information (Thông tin định dạng): Vùng chứa thông tin về mức độ sửa lỗi và mask pattern được sử dụng. Nằm gần các Finder Patterns, giúp máy quét điều chỉnh cách đọc dữ liệu.
  • Data Area : Phần còn lại của QR code, nơi chứa thông tin được mã hóa thực sự. Dữ liệu được mã hóa thành các module đen và trắng theo thuật toán cụ thể.
  • Error Correction Level : QR code có 4 mức độ sửa lỗi:
    • L (Low): Có thể khôi phục 7% dữ liệu bị mất
    • M (Medium): Có thể khôi phục 15% dữ liệu bị mất
    • Q (Quartile): Có thể khôi phục 25% dữ liệu bị mất
    • H (High): Có thể khôi phục 30% dữ liệu bị mất
  • Quiet Zone : Khoảng trống xung quanh QR code, thường có độ rộng ít nhất bằng 4 module. Vùng trống này giúp máy quét phân biệt QR code với những yếu tố khác xung quanh nó.

Nhờ cấu trúc đặc biệt này, máy quét có thể nhanh chóng nhận diện QR code, xác định hướng và giải mã nội dung, ngay cả khi mã bị hư hỏng một phần hoặc được quét từ nhiều góc độ khác nhau.

4. Quá trình máy quét đọc và hiểu QR code

  1. Chụp ảnh QR code: Máy quét hoặc camera điện thoại chụp ảnh QR code.
  2. Nhận diện vị trí: Phần mềm xác định ba Finder Patterns (góc) để định hướng và xác định biên của QR code.
  3. Hiệu chỉnh góc nhìn: Dựa vào Alignment Patterns, phần mềm điều chỉnh hình ảnh để bù đắp cho độ nghiêng hoặc méo.
  4. Đọc các module: Sau khi đã căn chỉnh, phần mềm đọc giá trị của từng module (đen = 1, trắng = 0) tạo thành chuỗi bit.
  5. Gỡ bỏ mask pattern: Phần mềm xác định mask pattern đã được áp dụng và gỡ bỏ nó khỏi dữ liệu.
  6. Giải mã và sửa lỗi: Dữ liệu nhị phân được giải mã và các lỗi được sửa nếu cần thiết.
  7. Chuyển đổi sang dữ liệu gốc: Cuối cùng, chuỗi bit được chuyển đổi lại thành dạng dữ liệu gốc (URL, văn bản, vCard, v.v.).

Ví dụ đơn giản: Nếu bạn muốn mã hóa từ “Hello” trong QR code:

  1. “Hello” được chuyển thành mã ASCII: 72 101 108 108 111
  2. Các mã này được chuyển sang nhị phân: 01001000 01100101 01101100 01101100 01101111
  3. Thông tin về loại dữ liệu (văn bản) được thêm vào đầu chuỗi
  4. Thêm mã sửa lỗi
  5. Toàn bộ chuỗi bit được sắp xếp thành các module đen trắng theo thuật toán QR code

Nhờ vậy, khi bạn quét QR code, ứng dụng quét có thể đảo ngược quá trình này để hiển thị lại từ “Hello” cho bạn.

Đây là lý do tại sao QR code có thể chứa lượng thông tin lớn trong không gian nhỏ và vẫn đảm bảo độ chính xác cao khi quét.

5. Hướng dẫn tạo và quét QR Code với TypeScript

5.1 Tạo QR Code với TypeScript

Trước tiên cài đặt thư viện bằng lệnh npm install qrcode @types/qrcode.

Javascript

import QRCode from 'qrcode';

// Tạo QR code dạng URL ảnh
const generateQRAsDataURL = async (data: string): Promise<string> => {
  try {
    const url = await QRCode.toDataURL(data, {
      errorCorrectionLevel: 'M',
      margin: 1,
      width: 300
    });
    return url;
  } catch (error) {
    console.error('Error generating QR code:', error);
    throw error;
  }
};

// Sử dụng
generateQRAsDataURL('https://example.com')
  .then(url => {
    // Hiển thị QR code
    const img = document.createElement('img');
    img.src = url;
    document.body.appendChild(img);
  })
  .catch(err => console.error(err));

5.2 Quét QR Code với Typescript

Javascript

// Cài đặt: npm install jsqr @types/jsqr
import jsQR from 'jsqr';

// Quét QR code từ webcam
class QRScanner {
  private video: HTMLVideoElement;
  private canvas: HTMLCanvasElement;
  private context: CanvasRenderingContext2D;
  private scanning: boolean = false;
  
  constructor(videoElementId: string) {
    this.video = document.getElementById(videoElementId) as HTMLVideoElement;
    this.canvas = document.createElement('canvas');
    this.context = this.canvas.getContext('2d') as CanvasRenderingContext2D;
  }
  
  public async start(callback: (data: string) => void): Promise<void> {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ 
        video: { facingMode: "environment" } 
      });
      
      this.video.srcObject = stream;
      this.video.play();
      this.scanning = true;
      
      const scan = () => {
        if (!this.scanning) return;
        
        if (this.video.readyState === this.video.HAVE_ENOUGH_DATA) {
          this.canvas.width = this.video.videoWidth;
          this.canvas.height = this.video.videoHeight;
          this.context.drawImage(this.video, 0, 0, this.canvas.width, this.canvas.height);
          
          const imageData = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);
          const code = jsQR(imageData.data, imageData.width, imageData.height, {
            inversionAttempts: "dontInvert" 
          });
          
          if (code) {
            callback(code.data);
          }
        }
        
        requestAnimationFrame(scan);
      };
      
      scan();
      
    } catch (error) {
      console.error('Error accessing camera:', error);
      throw error;
    }
  }
  
  public stop(): void {
    this.scanning = false;
    if (this.video.srcObject) {
      const tracks = (this.video.srcObject as MediaStream).getTracks();
      tracks.forEach(track => track.stop());
      this.video.srcObject = null;
    }
  }
}

// Sử dụng
const scanner = new QRScanner('video-element');
scanner.start((data) => {
  console.log('Scan result:', data);
  document.getElementById('result').textContent = data;
  // Nếu muốn dừng sau khi quét thành công
  // scanner.stop();
});

6. Kết luận

QR Code là một công nghệ đơn giản, dễ sử dụng nhưng lại cực kỳ hiệu quả. Với khả năng lưu trữ dữ liệu lớn, quét nhanh từ mọi góc độ và khôi phục dữ liệu ngay cả khi bị hư hại, QR Code đã và đang trở thành một phần không thể thiếu trong các giải pháp công nghệ hiện đại.

Bài viết cùng chuyên mục
Tối ưu ứng dụng với cấu trúc dữ liệu cơ bản và bitwise
Công Nghệ

Tối ưu ứng dụng với cấu trúc dữ liệu cơ bản và bitwise

Trong bài viết này, 200Lab sẽ chia sẻ những trường hợp dễ...

Công Nghệ

So sánh Flutter vs React Native: Framework nào đáng học năm 2021

Điểm chung của Flutter, React Native đều là Cross-platform Mobile, build native...

HTTP/2 là gì? So sánh HTTP/2 và HTTP/1
Công Nghệ

HTTP/2 là gì? So sánh HTTP/2 và HTTP/1

Từ khi Internet ra đời, sự phát triển về các giao thức...

Upload File từ Frontend đến Backend mà rất nhiều bạn vẫn đang làm sai!!
Công Nghệ

Upload File từ Frontend đến Backend mà rất nhiều bạn vẫn đang làm sai!!

1. Client encode file (base64) rồi gởi về backend 200Lab đã từng...

Công Nghệ

React Native – Hướng dẫn làm việc với Polyline và Animated-Polyline trên Map

Vẽ đường đi trên bản đồ là một nghiệp vụ vô cùng...

Công Nghệ

Hybrid App và Native App: Những khác biệt to lớn

Bất cứ khi nào một công ty quyết định làm ứng dụng...

Web/System Architecture 101 – Kiến trúc web/hệ thống cơ bản cho người mới
Công Nghệ

Web/System Architecture 101 – Kiến trúc web/hệ thống cơ bản cho người mới

Đây là một kiến trúc cơ bản mà bất kì một người...

Công Nghệ

Tư duy kiến trúc thông qua các trò chơi mà rất nhiều bạn không biết

Tư duy kiến trúc là gì? Tư duy kiến trúc có thể...