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

• 上一页
• 1
• 2
• 下一页

• 舒适耐听的手机听歌伴侣！——山灵UA1解码耳放线小评
• 《湖南省区域科技创新能力评价报告2020》发布，长沙创新引领发展优势明显
• 长株潭科技创新分列前3名，衡岳常益成为新崛起的区域科创中心
• 战斗天使来袭--新派NuPrime ALITA解码耳放一体机
• 城市区域5G网络耗电量接近4G的10倍，其中华为基站功率稍高
• 面试必问之JVM
• JWT 使用 nimbus-jose-jwt 进行解码
• 对讲|防爆对讲手机有哪些优点？
• 都市条形码资讯|大家都在问同一句话，热搜第一！微信突然上线新表情
• 港股解码|【会议直击】80岁的维他奶有什么宏愿！