Barcode Detection API

Khái niệm và cách sử dụng

Khả năng nhận diện mã vạch trong ứng dụng web mở ra nhiều trường hợp sử dụng khác nhau thông qua các định dạng mã vạch được hỗ trợ. Mã QR có thể được dùng cho thanh toán trực tuyến, điều hướng web hoặc thiết lập kết nối mạng xã hội; mã Aztec có thể được dùng để quét thẻ lên máy bay; và các ứng dụng mua sắm có thể dùng mã vạch EAN hoặc UPC để so sánh giá của hàng hóa vật lý.

Việc phát hiện được thực hiện thông qua phương thức detect(), phương thức này nhận vào một đối tượng hình ảnh; đó có thể là một trong các đối tượng sau: một HTMLImageElement, một SVGImageElement, một HTMLVideoElement, một HTMLCanvasElement, một ImageBitmap, một OffscreenCanvas, một VideoFrame, một Blob, hoặc một ImageData. Bạn có thể truyền các tham số tùy chọn vào hàm tạo BarcodeDetector để gợi ý những định dạng mã vạch cần phát hiện.

Các định dạng mã vạch được hỗ trợ

Barcode Detection API hỗ trợ các định dạng mã vạch sau:

Định dạng	Mô tả	Hình ảnh
aztec	Mã ma trận hai chiều hình vuông theo chuẩn iso24778, có hoa văn "mắt bò" hình vuông ở chính giữa nên trông giống kim tự tháp Aztec. Không yêu cầu vùng trống bao quanh.
code_128	Mã vạch tuyến tính (một chiều), có thể giải mã theo hai hướng, tự kiểm tra lỗi theo chuẩn iso15417 và có thể mã hóa toàn bộ 128 ký tự của ASCII (đó là lý do có tên gọi này).
code_39	Mã vạch tuyến tính (một chiều), tự kiểm tra lỗi theo chuẩn iso16388. Đây là loại mã vạch rời rạc và có độ dài biến đổi.
code_93	Hệ ký hiệu tuyến tính liên tục có độ dài biến đổi theo chuẩn bc5. Nó cung cấp mật độ thông tin cao hơn Code 128 và Code 39, vốn có hình thức tương tự. Code 93 chủ yếu được Canada Post sử dụng để mã hóa thông tin giao hàng bổ sung.
codabar	Mã vạch tuyến tính biểu diễn các ký tự 0-9, A-D và các ký hiệu - . $ / +
data_matrix	Mã vạch hai chiều không phụ thuộc hướng, được tạo thành từ các mô-đun đen trắng sắp xếp theo dạng hình vuông hoặc hình chữ nhật theo chuẩn iso16022.
ean_13	Mã vạch tuyến tính dựa trên chuẩn UPC-A và được định nghĩa trong iso15420.
ean_8	Mã vạch tuyến tính được định nghĩa trong iso15420 và phát triển từ EAN-13.
itf	Mã vạch liên tục, tự kiểm tra lỗi, có thể giải mã theo hai hướng. Nó luôn mã hóa 14 chữ số.
pdf417	Định dạng hệ ký hiệu mã vạch hai chiều liên tục với nhiều hàng và cột. Nó có thể giải mã theo hai hướng và dùng chuẩn iso15438.
qr_code	Mã vạch hai chiều dùng chuẩn iso18004. Thông tin được mã hóa có thể là văn bản, URL hoặc dữ liệu khác.
upc_a	Một trong những loại mã vạch tuyến tính phổ biến nhất và được áp dụng rộng rãi trong lĩnh vực bán lẻ tại Hoa Kỳ. Được định nghĩa trong iso15420, nó biểu diễn các chữ số bằng các vạch và khoảng trắng; mỗi chữ số gắn với một mẫu duy nhất gồm 2 vạch và 2 khoảng trắng, đều có độ rộng biến đổi. UPC-A có thể mã hóa 12 chữ số được gán duy nhất cho từng mặt hàng thương mại, và về mặt kỹ thuật là một tập con của EAN-13 (mã UPC-A được biểu diễn trong EAN-13 với ký tự đầu tiên là 0).
upc_e	Một biến thể của UPC-A được định nghĩa trong iso15420, lược bỏ các số 0 không cần thiết để tạo mã vạch gọn hơn.
unknown	Giá trị này được nền tảng sử dụng để biểu thị rằng nó không biết hoặc không chỉ rõ định dạng mã vạch đang được phát hiện hoặc được hỗ trợ là gì.

Bạn có thể kiểm tra các định dạng mà user agent hỗ trợ thông qua phương thức getSupportedFormats().

Giao diện

BarcodeDetector Thử nghiệm

Giao diện BarcodeDetector của Barcode Detection API cho phép phát hiện mã vạch tuyến tính và mã vạch hai chiều trong ảnh.

Ví dụ

Tạo detector

Ví dụ này kiểm tra khả năng tương thích của trình duyệt và tạo một đối tượng phát hiện mã vạch mới với các định dạng hỗ trợ được chỉ định.

// kiểm tra khả năng tương thích
if (!("BarcodeDetector" in globalThis)) {
  console.log("Barcode Detector is not supported by this browser.");
} else {
  console.log("Barcode Detector supported!");

  // tạo detector mới
  const barcodeDetector = new BarcodeDetector({
    formats: ["code_39", "codabar", "ean_13"],
  });
}

Lấy các định dạng được hỗ trợ

Ví dụ sau gọi phương thức getSupportedFormats() và ghi kết quả ra bảng điều khiển.

// kiểm tra các loại được hỗ trợ
BarcodeDetector.getSupportedFormats().then((supportedFormats) => {
  supportedFormats.forEach((format) => console.log(format));
});

Phát hiện mã vạch

Ví dụ này dùng phương thức detect() để phát hiện mã vạch trong hình ảnh đã cho. Sau đó lặp qua các mã tìm được và ghi dữ liệu mã vạch ra bảng điều khiển.

barcodeDetector
  .detect(imageEl)
  .then((barcodes) => {
    barcodes.forEach((barcode) => console.log(barcode.rawValue));
  })
  .catch((err) => {
    console.log(err);
  });

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• barcodefaq.com: Trang web cung cấp thông tin về nhiều loại mã vạch khác nhau cùng ví dụ cho từng loại.
• Shape Detection API: một hình ảnh đáng giá ngàn lời nói, khuôn mặt và mã vạch