Dynamsoft Barcode Reader SDK一款多功能的條碼讀取控件，只需要幾行代碼就可以將條碼讀取功能嵌入到Web或桌面應用程序。這可以節省數月的開發時間和成本。能支持多種圖像文件格式以及從攝像機或掃描儀獲取的DIB格式。使用Dynamsoft Barcode Reader SDK，你可以創建強大且實用的條形碼掃描儀軟件，以滿足你的業務需求。

點擊下載Dynamsoft Barcode Reader最新版

條形碼定位算法是圖像中條形碼識別的必要步驟。但是，對于靜態圖像，圖像尺寸越大，算法花費的時間就越多。另外，算法的成功率可能會受到背景色和前景色的干擾。很難保證100％的條形碼定位成功率。如果自動檢測失敗，可行的解決方法是切換到手動模式，用肉眼選擇條形碼區域，以便識別所需的條形碼。在本文中，我將演示如何創建一個簡單的Web畫布區域選擇工具，以使用Dynamsoft JavaScript Barcode SDK進行條形碼區域檢測。

畫布區域選擇

區域選擇步驟包括：

• 選擇一個圖像。
• 單擊鼠標并拖動光標以繪制一個矩形。
• 清除上一幅畫并重復第二步。

<style>
        #container {
          position: relative;
        }
     
        #imageCanvas {
          position: relative;
          z-index: 1;
        }
     
        #overlay {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 2
        }
     
      </style>
 
<div id="container">
        <canvas id="imageCanvas"> </canvas>
        <canvas id="overlay"></canvas>
</div>

<input type="file" id="barcode-file" onchange="loadfile()" accept=".jpg,.jpeg,.png,.bmp" />
 
function loadfile() {
            let img = new Image();
            var reader = new FileReader();
            reader.onload = function (evt) {
                img.onload = function () {                    
                    if (img.width > maxLength) {
                        img.height = maxLength * img.height / img.width
                        img.width = maxLength;
                    }
                    else if (img.height > maxLength) {
                        img.width = maxLength * img.width / img.height
                        img.height = maxLength;
                    }
                    canvas.width = img.width;
                    canvas.height = img.height;
                    overlay.width = canvas.width;
                    overlay.height = canvas.height;
                     
                    context.drawImage(img, 0, 0, img.width, img.height);
                };
                img.src = evt.target.result;
            };
            reader.readAsDataURL(name.files[0]);
     
}

接下來，您可以將鼠標事件偵聽器添加到覆蓋畫布。需要三個鼠標事件：mousedown，mousemove和mouseup：

function clearOverlay() {
            overlayCtx.clearRect(0, 0, overlay.width, overlay.height);
            overlayCtx.strokeStyle = '#ff0000';
            overlayCtx.lineWidth = 5;
        }
 
overlay.addEventListener('mousedown', e => {
                    startX = e.offsetX;
                    startY = e.offsetY;
                    isDrawing = true;
                    clearOverlay();
                    overlay.style.cursor = "crosshair";
                });
 
                overlay.addEventListener('mousemove', e => {
                    if (isDrawing) {
                        clearOverlay();
                        overlayCtx.beginPath();
                        overlayCtx.rect(startX, startY, e.offsetX - startX, e.offsetY - startY);  
                        overlayCtx.stroke();
                    } 
                    mousePosition.innerHTML = "Cursor: (" + e.offsetX + ", " + e.offsetY + ")";
                });
 
                overlay.addEventListener('mouseup', e => {
                    if (isDrawing) {
                        isDrawing = false;
                         
                        mousePosition.innerHTML = "Cursor: (" + e.offsetX + ", " + e.offsetY + ")";
                        region.innerHTML = "Decode a region: (" + startX + ", " + startY + ", " + e.offsetX + ", " + e.offsetY + "). ";
                        overlay.style.cursor = "default";
                    }
 
                });

條形碼區域檢測

為了進行比較，您可以首先從完整圖像中解碼條形碼。Dynamsoft JavaScript解碼API支持多種數據類型作為輸入源，例如文件對象，Blob，Buffer，ArrayBuffer，Uint8Array，Uint8ClampedArray，HTMLImageElement，HTMLCanvasElement，HTMLVideoElement和字符串：

(async () => {
                await barcodereader.resetRuntimeSettings();
                await barcodereader.updateRuntimeSettings('coverage'); // Mode: speed, balance, coverage
                try {
                    await barcodereader.decode(name.files[0]).then((results) => {
                        let txts = [];
                        try {
                            for (let i = 0; i < results.length; ++i) {
                                txts.push(results[i].BarcodeText);
                            }
                            let barcoderesults = txts.join(', ');
                        } catch (e) {
                        }
                    });
                } catch (error) {
                    alert(error);
                }
            })();

• 該resetRuntimeSettings（）方法改變了所有的設置為默認值。
• 所述updateRuntimeSettings（“覆蓋”）最大化識別通過犧牲解碼速度精度。

overlay.addEventListener('mouseup', e => {
                    if (isDrawing) {
                        isDrawing = false;
                         
                        mousePosition.innerHTML = "Cursor: (" + e.offsetX + ", " + e.offsetY + ")";
                        region.innerHTML = "Decode a region: (" + startX + ", " + startY + ", " + e.offsetX + ", " + e.offsetY + "). ";
                        overlay.style.cursor = "default";
 
                        // Decode a region of the barcode image
                        (async () => {
                            let settings = await barcodereader.getRuntimeSettings();
                            settings.region.regionLeft = startX * 100 / overlay.width;
                            settings.region.regionTop = startY * 100 / overlay.height;
                            settings.region.regionRight = e.offsetX * 100 / overlay.width;
                            settings.region.regionBottom = e.offsetY * 100 / overlay.height;
                            settings.region.regionMeasuredByPercentage = 1;
                            barcodereader.updateRuntimeSettings(settings);
                            try {
                                let decodingStart = Date.now();
                                await barcodereader.decode(name.files[0]).then((results) => {
                                    let decodingEnd = Date.now();
                                    let txts = [];
                                    try {
                                        for (let i = 0; i < results.length; ++i) {
                                            txts.push(results[i].BarcodeText);
                                        }
                                        let barcoderesults = txts.join(', ');
                                    catch (e) {
                                    }
                                });
                            } catch (error) {
                                alert(error);
                            }
                        })();
                    }
 
                });

現在，您可以在網絡瀏覽器中測試條形碼區域檢測應用程序。