條形碼解碼首先要做定位，找到條形碼在圖像中的區域。但是有時候受圖像質量影響，算法找尋的區域可能產生偏差，最后導致解碼失敗。這個時候，可以嘗試手動選擇區域，來輔助條形碼的識別。

Web Canvas框選識別條形碼

需求：

在網頁中加載條形碼圖像。

使用鼠標框選出條形碼的區域。

識別區域中的條形碼。

Web Canvas圖像顯示

創建input選擇文件。獲取文件對象之后，使用FileReader讀取并繪制到canvas上。如果讀取的圖像太大，可以設定一個最大縮放值：

<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.widthimg.width = maxLength;}else if (img.height > maxLength) {img.width = maxLength * img.width / img.heightimg.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]);}

鼠標框選矩形區域

要在圖像上面繪制出一個矩形框，需要創建另外一個canvas，并把它放置到圖像的上面：

<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>

接下來監聽鼠標事件，在鼠標移動的時候繪制矩形：

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";}});

條形碼識別

在鼠標左鍵抬起的時候，可以獲得矩形最終的區域。把這個區域設置到接口中：

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);}})();}});

現在可以很方便的選中一塊條形碼的區域來查看解碼結果。

源碼

https://gist.github.com/yushulx/b21d0919a1e92e0a320929799a99a5de

總結

以上是生活随笔為你收集整理的vs矩形框边框线显示被选中的区域;_条形码区域解码：Web小工具的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。