vs矩形框边框线显示被选中的区域;_条形码区域解码：Web小工具

条形码解码首先要做定位，找到条形码在图像中的区域。但是有时候受图像质量影响，算法找寻的区域可能产生偏差，最后导致解码失败。这个时候，可以尝试手动选择区域，来辅助条形码的识别。

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小工具的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。