Dynamsoft Barcode Reader创建一个简单的Web画布区域选择工具

Stella981
• 阅读 482

Dynamsoft Barcode Reader SDK一款多功能的条码读取控件,只需要几行代码就可以将条码读取功能嵌入到Web或桌面应用程序。这可以节省数月的开发时间和成本。能支持多种图像文件格式以及从摄像机或扫描仪获取的DIB格式。使用Dynamsoft Barcode Reader SDK,你可以创建强大且实用的条形码扫描仪软件,以满足你的业务需求。

点击下载Dynamsoft Barcode Reader最新版

条形码定位算法是图像中条形码识别的必要步骤。但是,对于静态图像,图像尺寸越大,算法花费的时间就越多。另外,算法的成功率可能会受到背景色和前景色的干扰。很难保证100%的条形码定位成功率。如果自动检测失败,可行的解决方法是切换到手动模式,用肉眼选择条形码区域,以便识别所需的条形码。在本文中,我将演示如何创建一个简单的Web画布区域选择工具,以使用Dynamsoft JavaScript Barcode SDK进行条形码区域检测。

画****布区域选择

区域选择步骤包括:

  • 选择一个图像。
  • 单击鼠标并拖动光标以绘制一个矩形。
  • 清除上一幅画并重复第二步。

要实现这些要求,您需要创建两个画布:一个用于显示图像,另一个用于图形叠加:

首先,使用FileReader()加载图像文件并将其绘制在图像画布上:

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(“覆盖”)最大化识别通过牺牲解码速度精度。

条形码区域检测代码可以添加到mouseup事件函数中:

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

            });

由于您可能已经缩放了图像,因此可以设置百分比而不是实际坐标值。regionMeasuredByPercentage的值 必须为1。

现在,您可以在网络浏览器中测试条形码区域检测应用程序。

Dynamsoft Barcode Reader创建一个简单的Web画布区域选择工具 Dynamsoft Barcode Reader创建一个简单的Web画布区域选择工具


想要购买Dynamsoft Barcode Reader正版授权,或了解更多产品信息请点击【咨询在线客服】

Dynamsoft Barcode Reader创建一个简单的Web画布区域选择工具

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Stella981 Stella981
2年前
Dynamsoft Barcode Reader资讯:条形码解决方案的11个真实案例
DynamsoftBarcodeReaderSDK(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.evget.com%2Fproduct%2F3691)一款多功能的条码读取控件,只需要几行代码就可以将条码读取功能嵌入到Web或桌面应用程序。这可以节省数月的开发时间和成本。
Stella981 Stella981
2年前
Dynamsoft Barcode Reader从文本识别到数据控制
DynamsoftBarcodeReaderSDK(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.evget.com%2Fproduct%2F3691)一款多功能的条码读取控件,只需要几行代码就可以将条码读取功能嵌入到Web或桌面应用程序。这可以节省数月的开发时间和成本。
Stella981 Stella981
2年前
Lee Valley通过Dynamsoft Barcode Reader JavaScript SDK推出了创新的非接触式购物功能
DynamsoftBarcodeReaderSDK(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.evget.com%2Fproduct%2F3691)一款多功能的条码读取控件,只需要几行代码就可以将条码读取功能嵌入到Web或桌面应用程序。这可以节省数月的开发时间和成本。
Stella981 Stella981
2年前
Dynamsoft Barcode Reader v8.1全新上线!添加了对MSI代码的支持
DynamsoftBarcodeReaderSDK(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.evget.com%2Fproduct%2F3691)一款多功能的条码读取控件,只需要几行代码就可以将条码读取功能嵌入到Web或桌面应用程序。这可以节省数月的开发时间和成本。
Stella981 Stella981
2年前
Dynamsoft Barcode SDK的隐藏图像数据
DynamsoftBarcodeReaderSDK(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.evget.com%2Fproduct%2F3691)一款多功能的条码读取控件,只需要几行代码就可以将条码读取功能嵌入到Web或桌面应用程序。这可以节省数月的开发时间和成本。
Stella981 Stella981
2年前
Dynamsoft Barcode Reader从驾驶执照PDF417中提取数据
DynamsoftBarcodeReaderSDK(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.evget.com%2Fproduct%2F3691)一款多功能的条码读取控件,只需要几行代码就可以将条码读取功能嵌入到Web或桌面应用程序。这可以节省数月的开发时间和成本。
Python进阶者 Python进阶者
5个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
贾蓁 贾蓁
4个月前
2023最新版-Web前端架构师(35周完结无密)
2023最新版Web前端架构师(35周完结无密)download》http://quangneng.com/3677/Web前端架构师是负责设计和构建高效、可扩展和可维护的前端Web应用程序的专家。他们通常具有深厚的技术背景,熟悉各种前端技术和工具,并能够