江苏龙网

  1. 首页 > 人文 > >

条形码区域解码：Web小工具

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

  1. 在网页中加载条形码图像 。
  2. 使用鼠标框选出条形码的区域 。
  3. 识别区域中的条形码 。
Web Canvas图像显示创建input选择文件 。 获取文件对象之后 ， 使用FileReader读取并绘制到canvas上 。 如果读取的图像太大 ， 可以设定一个最大缩放值：
【条形码区域解码：Web小工具】 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 = http://kandian.youth.cn/index/evt.target.result;};reader.readAsDataURL(name.files[0]);}鼠标框选矩形区域要在图像上面绘制出一个矩形框 ， 需要创建另外一个canvas ， 并把它放置到图像的上面：
#container {position: relative;}#imageCanvas {position: relative;z-index: 1;}#overlay {position: absolute;top: 0;left: 0;z-index: 2} 接下来监听鼠标事件 ， 在鼠标移动的时候绘制矩形：
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


推荐阅读


上一篇：飞傲Q3评测：花个小钱就能享受高品质音乐带来的愉悦

下一篇：不做CRUD的我开源了Springboot API一键生成器