QuaggaJS用法及功能介紹

更新時間：2025年06月09日 10:28:45 作者：IT?老王

QuaggaJS是一個功能強大的條形碼識別庫,適合需要在瀏覽器中實現(xiàn)條形碼和二維碼掃描功能的應用場景,尤其是需要支持多種條形碼格式的情況,本文給大家介紹QuaggaJS用法,感興趣的朋友一起看看吧

QuaggaJS簡介

QuaggaJS是一個強大的JavaScript庫，專門用于在瀏覽器環(huán)境中進行條形碼和二維碼識別。它支持多種條形碼格式，包括Code 128、Code 39、EAN、QR碼等，并且可以直接調(diào)用設備攝像頭進行實時掃描。

QuaggaJS核心功能與用法

1. 基本配置與初始化

使用QuaggaJS首先需要引入庫文件，并進行基本配置：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>QuaggaJS條形碼掃描示例</title>
  <!-- 引入QuaggaJS庫 -->
  <script src="https://cdn.jsdelivr.net/npm/quagga@0.12.1/dist/quagga.min.js"></script>
</head>
<body>
  <div id="interactive" class="viewport"></div>
  <div id="result"></div>
  <script>
    // 頁面加載完成后初始化Quagga
    document.addEventListener('DOMContentLoaded', function() {
      Quagga.init({
        inputStream : {
          name : "Live",
          type : "LiveStream",
          target: document.querySelector('#interactive') // 攝像頭視頻將顯示在這里
        },
        decoder : {
          readers : ["code_128_reader", "ean_reader", "ean_8_reader"] // 配置要識別的條形碼類型
        }
      }, function(err) {
        if (err) {
          console.error('初始化Quagga失敗:', err);
          return;
        }
        console.log('Quagga初始化成功');
        Quagga.start(); // 開始掃描
      });
    });
  </script>
</body>
</html>

2. 事件監(jiān)聽與結果處理

QuaggaJS提供了多種事件來監(jiān)聽掃描過程和結果：

// 設置檢測到條形碼時的回調(diào)
Quagga.onDetected(function(result) {
  const code = result.codeResult.code;
  const format = result.codeResult.format;
  document.getElementById('result').innerHTML = `
    <p>掃描結果: $[code]</p>
    <p>條形碼格式: ${format}</p>
  `;
  // 可以在這里添加震動或聲音反饋
  navigator.vibrate(200);
});
// 設置處理每一幀的回調(diào)（用于可視化或調(diào)試）
Quagga.onProcessed(function(result) {
  const drawingCtx = Quagga.canvas.ctx.overlay;
  const drawingCanvas = Quagga.canvas.dom.overlay;
  if (result) {
    // 繪制檢測到的條形碼邊界框
    if (result.boxes) {
      drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
      result.boxes.filter(function (box) {
        return box !== result.box;
      }).forEach(function (box) {
        Quagga.ImageDebug.drawPath(box, {x: 0, y: 1}, drawingCtx, {color: "green", lineWidth: 2});
      });
    }
    // 繪制識別到的條形碼
    if (result.box) {
      Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, drawingCtx, {color: "#00F", lineWidth: 2});
    }
    // 繪制條形碼解碼位置
    if (result.codeResult && result.codeResult.code) {
      Quagga.ImageDebug.drawPath(result.line, {x: 'x', y: 'y'}, drawingCtx, {color: 'red', lineWidth: 3});
    }
  }
});

3. 配置選項詳解

QuaggaJS的初始化配置非常靈活，可以根據(jù)需求調(diào)整各種參數(shù)：

Quagga.init({
  inputStream : {
    name : "Live",
    type : "LiveStream",
    target: document.querySelector('#interactive'),
    constraints: {
      width: 640,
      height: 480,
      facingMode: "environment" // 使用后置攝像頭
    },
    area: { // 掃描興趣區(qū)域
      top: "0%",    // 從上到下的百分比
      right: "0%",  // 從右到左的百分比
      left: "0%",   // 從左到右的百分比
      bottom: "0%"  // 從下到上的百分比
    },
    // 控制是否顯示視頻預覽中的縮放控件
    showCanvas: false,
    showPatches: false,
    showFoundPatches: false
  },
  decoder : {
    readers : ["code_128_reader", "ean_reader", "ean_8_reader", "code_39_reader", "code_39_vin_reader", "codabar_reader", "upc_reader", "upc_e_reader"],
    debug: {
      showCanvas: true,
      showPatches: true,
      showFoundPatches: true,
      showSkeleton: true,
      showLabels: true,
      showPatchLabels: true,
      showRemainingPatchLabels: true,
      boxFromPatches: {
        showTransformed: true,
        showTransformedBox: true,
        showBB: true
      }
    }
  },
  locator: {
    patchSize: "medium", // 可以是 'small', 'medium', 'large'
    halfSample: true // 是否使用半采樣來提高性能
  },
  numOfWorkers: 4, // 處理線程數(shù)
  frequency: 10,   // 每秒處理的幀數(shù)
  locate: true     // 是否啟用定位（尋找條形碼位置）
}, function(err) {
  if (err) {
    console.error('初始化Quagga失敗:', err);
    return;
  }
  console.log('Quagga初始化成功');
  Quagga.start();
});

4. 控制掃描過程

你可以在需要時暫停、恢復或完全停止掃描過程：

// 暫停掃描（保持攝像頭打開）
function pauseScanning() {
  Quagga.pause();
  console.log('掃描已暫停');
}
// 恢復掃描
function resumeScanning() {
  Quagga.start();
  console.log('掃描已恢復');
}
// 完全停止掃描（關閉攝像頭）
function stopScanning() {
  Quagga.stop();
  console.log('掃描已停止，攝像頭已關閉');
}

5. 識別靜態(tài)圖片中的條形碼

除了實時掃描，QuaggaJS還可以用于識別靜態(tài)圖片中的條形碼：

// 從圖片文件識別條形碼
function recognizeFromImage(file) {
  Quagga.decodeSingle({
    decoder: {
      readers: ["code_128_reader", "ean_reader"] // 要嘗試的條形碼格式
    },
    locate: true, // 是否嘗試定位條形碼
    src: URL.createObjectURL(file) // 圖片文件對象
  }, function(result) {
    if (result.codeResult) {
      console.log('識別成功:', result.codeResult.code);
    } else {
      console.log('未識別到條形碼');
    }
  });
}
// 使用示例
document.getElementById('imageInput').addEventListener('change', function(e) {
  if (e.target.files && e.target.files[0]) {
    recognizeFromImage(e.target.files[0]);
  }
});

QuaggaJS與jsQR對比

QuaggaJS和jsQR是兩種常用的瀏覽器條形碼識別庫，它們有以下區(qū)別：

特性	QuaggaJS	jsQR
支持的條形碼格式	多種一維碼和二維碼	主要支持QR碼
性能	相對較慢（尤其是復雜場景）	非?？欤ㄡ槍R碼優(yōu)化）
配置復雜度	較高（有許多可調(diào)整參數(shù)）	較低（簡單易用）
攝像頭支持	優(yōu)秀（有興趣區(qū)域等高級功能）	基本功能
社區(qū)活躍度	中等	高
文件大小	較大（約300KB）	較?。s150KB）