CN116051670A - 基于react框架下canvas实现区域画框识别方法、系统及终端 - Google Patents

基于react框架下canvas实现区域画框识别方法、系统及终端 Download PDF

Info

Publication number
CN116051670A
CN116051670A CN202211493067.4A CN202211493067A CN116051670A CN 116051670 A CN116051670 A CN 116051670A CN 202211493067 A CN202211493067 A CN 202211493067A CN 116051670 A CN116051670 A CN 116051670A
Authority
CN
China
Prior art keywords
frame
canvas
area
algorithm
mouse
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202211493067.4A
Other languages
English (en)
Inventor
吴志雄
徐春梅
郑泽州
高稳仁
杨美娟
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Linewell Software Co Ltd
Original Assignee
Linewell Software Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Linewell Software Co Ltd filed Critical Linewell Software Co Ltd
Priority to CN202211493067.4A priority Critical patent/CN116051670A/zh
Publication of CN116051670A publication Critical patent/CN116051670A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N5/00—Details of television systems
    • H04N5/222—Studio circuitry; Studio devices; Studio equipment
    • H04N5/262—Studio circuits, e.g. for mixing, switching-over, change of character of image, other special effects ; Cameras specially adapted for the electronic generation of special effects
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06N—COMPUTING ARRANGEMENTS BASED ON SPECIFIC COMPUTATIONAL MODELS
    • G06N3/00—Computing arrangements based on biological models
    • G06N3/02—Neural networks
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/20—Drawing from basic elements, e.g. lines or circles
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/40—Filling a planar surface by adding surface attributes, e.g. colour or texture
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Life Sciences & Earth Sciences (AREA)
  • Computational Linguistics (AREA)
  • Health & Medical Sciences (AREA)
  • Multimedia (AREA)
  • Artificial Intelligence (AREA)
  • Biomedical Technology (AREA)
  • Biophysics (AREA)
  • Signal Processing (AREA)
  • Data Mining & Analysis (AREA)
  • Evolutionary Computation (AREA)
  • General Health & Medical Sciences (AREA)
  • Molecular Biology (AREA)
  • Computing Systems (AREA)
  • Mathematical Physics (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本发明属于计算机软件应用技术领域，公开了一种基于react框架下canvas实现区域画框识别方法、系统及终端，方法包括：在制定页面中，利用EasyWarmPlayer读取后台推送的视频流播放摄像头播放内容并展示；在视频播放器之上覆盖一层canvas，并根据用户所选择的绘制区域类型实现不同的操作，包括矩形绘制、椭圆(圆)形绘制、多边形绘制三种方式，完成区域绘制并获取绘制点坐标，根据摄像头播放区域自动将坐标转换成统一的分辨率大小，再把坐标数据通过接口传递给后台存储并进行算法识别；针对区域算法框进行修改和删除。本发明能够实现每一个摄像头下都能够绘制多个算法框区域，根据用户使用鼠标习惯绘制区域块，并且能够根据区域颜色区分不同的算法区域。

Description

基于react框架下canvas实现区域画框识别方法、系统及终端
技术领域
本实用计算机软件应用技术领域，尤其涉及一种基于react框架下canvas实现区域画框识别方法、系统及终端。
背景技术
目前，摄像头网络神经在我们国家有着庞大的规模；而随着计算机神经网络的飞速发展，算法识别应用也在各个应用飞速普及；二者之间的结合是一种趋势所在。在同一个摄像头场景之下，根据不同的区域来识别不同的算法就成为一项十分有意义的工作。而在react框架下类似的应用功能非常少，而且大多只能够根据单一摄像头绘制单一算法框区域，无法做到每一个摄像头都能够做到绘制多个算法框区域，对于用户来说功能性会大大降低。因此本发明就是基于这一痛点提出的解决方案，本发明能够根据用户在同一场景下绘制图形并获取绘制点坐标转换统一分辨率再传给后台算法识别。
通过上述分析，现有技术存在的问题及缺陷为：
(1)现有技术上针对react前端应用框架下的算法框绘制应用较少。
(2)大多技术只能够根据单一摄像头绘制单一算法框区域，无法做到每一个摄像头都能够做到绘制多个算法框区域，对于用户来说功能性会大大降低。
发明内容
针对现有技术存在的问题，本发明提供了一种基于react框架下canvas实现区域画框识别方法、系统及终端。
本发明是这样实现的，一种基于react框架下canvas实现区域画框识别方法，所述基于react框架下canvas实现区域画框识别方法包括：
步骤一，在制定页面中，利用EasyWarmPlayer读取后台推送的视频流(H264/H265)播放摄像头播放内容并展示；
步骤二，在摄像头播放器(在本例中为EasyWarmPlayer播放器)之上覆盖一层canvas，并根据用户所选择的绘制区域类型实现不同场景下的操作，每一个算法区域框都会对应一个canvas对象，本发明提供三种绘制功能，分别是矩形绘制、椭圆(圆)形绘制、多边形绘制三种方式；
步骤三，针对区域算法框进行修改和删除。
进一步，所述步骤二中矩形绘制的具体过程为：
(1.1)用户选择矩形绘制工具，后台代码机制用户选择的绘制工具，用户根据鼠标在canvas上确认起始点；
(1.2)通过用户的鼠标移动来获取绘制区域，判断用户是否松开鼠标；
(1.3)当用户没有松开鼠标，则利用react的监听机制，根据起始点上和当前鼠标移动的坐标在canvas绘制矩形，在鼠标的移动过程种反复填空和重复绘制，并填充相对应颜色和线条；当用户松开鼠标之后完成区域绘制并获取绘制点坐标，根据摄像头播放区域自动将坐标转换成统一的分辨率大小(默认为(1920*1080)下的分辨率)，再把坐标数据通过接口传递给后台存储并进行算法识别。
进一步，所述步骤二中矩形绘制和圆形绘制的具体过程为：
(2.1)用户选择椭圆(圆)、矩形绘制工具，后台代码机制用户选择的绘制工具，用户根据鼠标在canvas上确认起始点；
(2.2)通过react的监听机制对用户的鼠标点击操作来确定圆心，并通过用户的鼠标移动来获取绘制区域从而计算绘制半径；
(2.3)当用户松开鼠标之后完成区域绘制，并会根据摄像头播放区域自动将圆心和半径转换成统一的分辨率大小(默认为(1920*1080)下的分辨率)，再把坐标数据通过接口传递给后台存储，后端接收到接收到坐标利用坐标截取视频流上的截图并转换为Base64位格式，调用opencv将base64图片转化为numpy数组，再将该numpy数组放入训练好的模型中。模型将会建立特征点向量，并将向量传入神经网络中进行推理，从而得出结果。最后后台把这个新增区域所属ID传递过来，用于后续的修改和删除操作。
进一步，所述步骤二中多边形绘制的具体过程为：
(3.1)用户选择绘制多边形算法区域工具，后台代码记住用户选择绘制工具，用户确定多边形算法区域的起始点坐标；
(3.2)通过用户在canvas上的点击监听操作，先通过点击操作确定起始点，之后根据鼠标的移动和canvas的特性绘制每一条边框，每确定每一个起始点的坐标，都会判断该坐标是否是距离起始点±5像素以内的点；
(3.3)如果不是，则继续在canvas上选取点坐标绘制区域；如果是，则会默认此时绘制多边形算法区域完成，会自动填充所选颜色并绘制一个闭合图形，再将每一个选中的点坐标转化为统一分辨率(默认为(1920*1080)下的分辨率)，再把坐标数据通过接口传递给后台存储并进行算法识别，最后后台把这个新增区域所属ID传递过来，用于后续的修改操作。
(3.4)根据新增区域
进一步，所述步骤三删除的具体过程为：
(4.1)根据新增区域完成时后端返回的ID，获取到当前绘制区域的画布，并且执行画布清空命令即可删除该选中的区域。
当绘制完成之后算法区域框在canvas上，用户根据鼠标选取一个初始点操作，判断所述算法区域框是多边形还是椭圆(圆)，若为多边形，则通过监听用户点击事件时获取到当前点击的点坐标，再拿该点坐标与多边形中的每一个坐标进行对比，判断该点坐标是否在当前任一多边形坐标列表内±5像素的区间内；如果在，则以该点为变化点，其他点坐标不变，利用鼠标移动对该点进行位置变换，并利用react的监听机制不断清空画布内容并重新绘制图形，当鼠标松动之后重新绘制完成，当用户松开鼠标结束操作是，此时修改结束；如果不在，则结束；
若为椭圆(圆)，则通过圆心点坐标和长半径或短半径来判断当前坐标是否在±5像素的像素区间内；若在，则确定距离坐标点最近的坐标，将其作为移动点，根据react的监听机制不断清空画布内容并重新绘制图形；若不在，则结束；
当修正结束后，react监听结束，将坐标点转换为统一分辨率(默认为(1920*1080)下的分辨率)，并传给后台用以识别算法区域。
本发明的另一目的在于提供一种基于react框架下canvas实现区域画框识别系统，所述基于react框架下canvas实现区域画框识别系统包括：
输入模块，用于利用EasyWarmPlayer视频流播放器读取后台推送的视频流播放摄像头播放内容并展示；
区域绘制模块，用于根据用户所选择的绘制区域类型实现不同的操作，包括矩形绘制、椭圆(圆)形绘制、多边形绘制三种方式；
修改模块，用于针对区域算法框进行修改和删除。
本发明的另一目的在于提供一种计算机设备，所述计算机设备包括存储器和处理器，所述存储器存储有计算机程序，所述计算机程序被所述处理器执行时，使得所述处理器执行所述基于react框架下canvas实现区域画框识别方法的步骤。
本发明的另一目的在于提供一种计算机可读存储介质，存储有计算机程序，所述计算机程序被处理器执行时，使得所述处理器执行所述基于react框架下canvas实现区域画框识别方法的步骤。
本发明的另一目的在于提供一种信息数据处理终端，所述信息数据处理终端用于基于react框架下canvas实现区域画框识别系统。
结合上述的技术方案和解决的技术问题，本发明所要保护的技术方案所具备的优点及积极效果为：
第一、针对上述现有技术存在的技术问题以及解决该问题的难度，紧密结合本发明的所要保护的技术方案以及研发过程中结果和数据等，详细、深刻地分析本发明技术方案如何解决的技术问题，解决问题之后带来的一些具备创造性的技术效果。具体描述如下：
(1)对react前端框架下的区域画框应用是一个很好的补充。
(2)针对传统画框应用组件只能画一个框这个痛点进行了深入的改进，原本每一个摄像头只能绘制一个区域框，而现在可以选择不同的图形进行绘制多个区域框。大大提高了用户的工作效率。
第二，把技术方案看做一个整体或者从产品的角度，本发明所要保护的技术方案具备的技术效果和优点，具体描述如下：
本发明能够实现每一个摄像头下都能够绘制多个算法框区域，根据用户使用鼠标习惯绘制区域块，并且能够根据区域颜色区分不同的算法区域。
第三，作为本发明的权利要求的创造性辅助证据，还体现在以下几个重要方面：
(1)本发明的技术方案转化后的预期收益和商业价值为：
本发明提供了一种有效的基于react框架下canvas实现区域画框识别方法，可以做到一个摄像头绘制多个区域块，大大提高了用户功能性，具有巨大的商业价值。
(2)本发明的技术方案填补了国内外业内技术空白：
本发明实现了基于react框架下canvas区域画框，每一个摄像头下都能够绘制多个算法框区域，弥补了目前业内只能针对单一摄像头绘制单一区域块的空白。
(3)本发明的技术方案是否解决了人们一直渴望解决、但始终未能获得成功的技术难题：
在同一个摄像头场景之下，根据不同的区域来识别不同的算法是一项十分有意义的工作。而现有技术上针对react前段应用框架下的算法框绘制应用较少。而且大多只能够根据单一摄像头绘制单一算法框区域，无法做到每一个摄像头都能够做到绘制多个算法框区域，对于用户来说功能性会大大降低。本发明针对react前段应用框架下的算法框绘制，提出一种canvas实现区域画框识别方法，攻克了每一个摄像头都能够做到绘制多个算法框区域的技术难题。
(4)本发明的技术方案是否克服了技术偏见：
针对React前端应用框架下的算法框绘制应用，大多只能够根据单一摄像头绘制单一算法框区域。本发明提出的基于react框架下canvas实现区域画框识别方法，能够根据用户在同一场景下绘制图形并获取绘制点坐标转换统一分辨率再传给后台算法识别，每一个摄像头下都能够绘制多个算法框区域，破解了传统技术偏见，极大提升了本发明的实用价值。
附图说明
图1是本发明实施例提供的基于react框架下canvas实现区域画框识别方法流程图；
图2是本发明实施例提供的矩形绘制、圆形绘制流程图；
图3是本发明实施例提供的多边形绘制流程图；
图4是本发明实施例提供的区域算法框的修改和删除流程图。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白，以下结合实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
为了使本领域技术人员充分了解本发明如何具体实现，该部分是对权利要求技术方案进行展开说明的解释说明实施例。
如图1所示，本发明实施例提供的基于react框架下canvas实现区域画框识别方法包括：
S101，在制定页面中，利用EasyWarmPlayer视频流播放器读取后台推送的视频流(H264/H265)播放摄像头播放内容并展示；
S102，在视频播放器之上覆盖一层canvas，并根据用户所选择的绘制区域类型实现不同的操作，每一个算法区域框都会对应一个canvas对象，本发明提供三种绘制功能，分别是矩形绘制、椭圆(圆)形绘制、多边形绘制三种方式；
S103，针对区域算法框进行修改和删除。
如图2所示，所述步骤S102中矩形绘制的具体过程为：
(1.1)用户选择矩形绘制工具，后台代码机制用户选择的绘制工具，用户根据鼠标在canvas上确认起始点；
(1.2)通过用户的鼠标移动来获取绘制区域，判断用户是否松开鼠标；
(1.3)当用户没有松开鼠标，则利用react的监听机制，根据起始点上和当前鼠标移动的坐标在canvas绘制矩形，在鼠标的移动过程种反复填空和重复绘制，并填充相对应颜色和线条；当用户松开鼠标之后完成区域绘制并获取绘制点坐标，根据摄像头播放区域自动将坐标转换成统一的分辨率大小(默认为(1920*1080)下的分辨率)，再把坐标数据通过接口传递给后台存储并进行算法识别。
所述步骤S102中矩形绘制和圆形绘制的具体过程为：
(2.1)用户选择椭圆(圆)、矩形绘制工具，后台代码机制用户选择的绘制工具，用户根据鼠标在canvas上确认起始点；
(2.2)通过react的监听机制对用户的鼠标点击操作来确定圆心，并通过用户的鼠标移动来获取绘制区域从而计算绘制半径；
(2.3)当用户松开鼠标之后完成区域绘制，并会根据摄像头播放区域自动将圆心和半径转换成统一的分辨率大小(默认为(1920*1080)下的分辨率)，再把坐标数据通过接口传递给后台存储并进行算法识别。
如图3所示，所述步骤S102中多边形绘制的具体过程为：
(3.1)用户选择绘制多边形算法区域工具，后台代码记住用户选择绘制工具，用户确定多边形算法区域的起始点坐标；
(3.2)通过用户在canvas上的点击监听操作，先通过点击操作确定起始点，之后根据鼠标的移动和canvas的特性绘制每一条边框，每确定每一个起始点的坐标，都会判断该坐标是否是距离起始点±5像素以内的点；
(3.3)如果不是，则继续在canvas上选取点坐标绘制区域；如果是，则会默认此时绘制多边形算法区域完成，会自动填充所选颜色并绘制一个闭合图形，再将每一个选中的点坐标转化为统一分辨率(默认为(1920*1080)下的分辨率)，再把坐标数据通过接口传递给后台存储并进行算法识别。
如图4所示，所述步骤S103的具体过程为：
当绘制完成之后算法区域框在canvas上，用户根据鼠标选取一个初始点操作，判断所述算法区域框是多边形还是椭圆(圆)，若为多边形，则通过监听用户点击事件时获取到当前点击的点坐标，再拿该点坐标与多边形中的每一个坐标进行对比，判断该点坐标是否在当前任一多边形坐标列表内±5像素的区间内；如果在，则以该点为变化点，其他点坐标不变，利用鼠标移动对该点进行位置变换，并利用react的监听机制不断清空画布内容并重新绘制图形，当鼠标松动之后重新绘制完成，当用户松开鼠标结束操作是，此时修改结束；如果不在，则结束；
若为椭圆(圆)，则通过圆心点坐标和长半径或短半径来判断当前坐标是否在±5像素的像素区间内；若在，则确定距离坐标点最近的坐标，将其作为移动点，根据react的监听机制不断清空画布内容并重新绘制图形；若不在，则结束；
当修正结束后，react监听结束，将坐标点转换为统一分辨率(默认为(1920*1080)下的分辨率)，并传给后台用以识别算法区域。
本发明实施例提供的基于react框架下canvas实现区域画框识别系统包括：
输入模块，用于利用EasyWarmPlayer视频流播放器读取后台推送的视频流播放摄像头播放内容并展示；
区域绘制模块，用于根据用户所选择的绘制区域类型实现不同的操作，包括矩形绘制、椭圆(圆)形绘制、多边形绘制三种方式；
修改模块，用于针对区域算法框进行修改和删除。
本发明实施例在研发或者使用过程中取得了一些积极效果，和现有技术相比的确具备很大的优势。
对react前端框架下的区域画框应用是一个很好的补充。针对传统画框应用组件只能画一个框这个痛点进行了深入的改进，原本每一个摄像头只能绘制一个区域框，而现在可以选择不同的图形进行绘制多个区域框。大大提高了用户的工作效率。
应当注意，本发明的实施方式可以通过硬件、软件或者软件和硬件的结合来实现。硬件部分可以利用专用逻辑来实现；软件部分可以存储在存储器中，由适当的指令执行系统，例如微处理器或者专用设计硬件来执行。本领域的普通技术人员可以理解上述的设备和方法可以使用计算机可执行指令和/或包含在处理器控制代码中来实现，例如在诸如磁盘、CD或DVD-ROM的载体介质、诸如只读存储器(固件)的可编程的存储器或者诸如光学或电子信号载体的数据载体上提供了这样的代码。本发明的设备及其模块可以由诸如超大规模集成电路或门阵列、诸如逻辑芯片、晶体管等的半导体、或者诸如现场可编程门阵列、可编程逻辑设备等的可编程硬件设备的硬件电路实现，也可以用由各种类型的处理器执行的软件实现，也可以由上述硬件电路和软件的结合例如固件来实现。
以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，都应涵盖在本发明的保护范围之内。

Claims (10)

1.一种基于react框架下canvas实现区域画框识别方法，其特征在于，所述基于react框架下canvas实现区域画框识别方法包括：
步骤一，在制定页面中，利用EasyWarmPlayer读取后台推送的视频流H264/H265播放摄像头播放内容并展示；
步骤二，在视频播放器之上覆盖一层canvas，并根据用户所选择的绘制区域类型绘制算法区域框，每一个算法区域框都会对应一个canvas对象，所述绘制区域类型包括矩形绘制、椭圆或圆形绘制、多边形绘制；
步骤三，针对区域算法框进行修改和删除。
2.如权利要求1所述基于react框架下canvas实现区域画框识别方法，其特征在于，所述步骤二中矩形绘制的具体过程为：
(1.1)选择矩形绘制工具，后台代码记住选择的绘制工具，用户根据鼠标在canvas上确认起始点；
(1.2)通过鼠标移动来获取绘制区域；
(1.3)最后，判断是否松开鼠标，当没有松开鼠标，则利用react的监听机制，根据所述起始点上和当前鼠标移动的坐标在canvas绘制矩形，在鼠标的移动过程中反复填空和重复绘制，并填充相对应颜色和线条；
当松开鼠标后，完成区域绘制并获取绘制点坐标，根据摄像头播放区域自动将坐标转换成统一的分辨率大小，再把坐标数据通过接口传递给后台存储并进行算法识别。
3.如权利要求1所述基于react框架下canvas实现区域画框识别方法，其特征在于，所述步骤二中椭圆或圆形绘制的具体过程为：
(2.1)选择椭圆或圆形绘制，后台代码记住选择的绘制工具，根据鼠标在canvas上确认起始点；
(2.2)通过react的监听机制对鼠标点击操作来确定圆心，并通过鼠标移动来获取绘制区域从而计算绘制半径；
(2.3)当松开鼠标后完成区域绘制，并会根据摄像头播放区域自动将圆心和半径转换成统一的分辨率大小，再把坐标数据通过接口传递给后台存储并进行算法识别。
4.如权利要求1所述基于react框架下canvas实现区域画框识别方法，其特征在于，所述步骤二中多边形绘制的具体过程为：
(3.1)选择绘制多边形算法区域工具，后台代码记住选择的绘制工具，用户确定多边形算法区域的起始点坐标；
(3.2)在canvas上点击监听操作，先通过点击操作确定起始点，之后根据鼠标的移动和canvas的特性绘制每一条边框，确定每一个起始点的坐标，都会判断所述坐标是否为距离起始点±5像素以内的点；
(3.3)如果不是，则继续在canvas上选取点坐标绘制区域；如果是，则会绘制多边形算法区域完成，会自动填充所选颜色并绘制一个闭合图形，再将每一个选中的点坐标转化为统一分辨率，再把坐标数据通过接口传递给后台存储并进行算法识别。
5.如权利要求1所述基于react框架下canvas实现区域画框识别方法，其特征在于，所述步骤三的具体过程为：
当绘制完成之后算法区域框在canvas上，根据鼠标选取一个初始点操作，判断所述算法区域框是多边形还是椭圆或圆形，若为多边形，则通过监听用户点击事件判断是否在当前坐标±5像素的像素区间内；如果在，则以当前坐标为变化点，其他点坐标不变，利用鼠标移动对所述当前坐标进行位置变换，并利用react的监听机制不断清空画布内容并重新绘制图形，当鼠标松动之后重新绘制完成，当用户松开鼠标结束操作是，此时修改结束；如果不在，则结束；
若为椭圆或圆形，则通过圆心点坐标和长半径或短半径来判断当前坐标是否在±5像素的像素区间内；若在，则确定距离坐标点最近的坐标，将其作为移动点，根据react的监听机制不断清空画布内容并重新绘制图形；若不在，则结束；
当修正结束后，react监听机制结束，将坐标点转换为统一分辨率并传给后台用以识别算法区域。
6.如权利要求2所述基于react框架下canvas实现区域画框识别方法，其特征在于，所述统一的分辨率大小为1920*1080。
7.一种实施如权利要求1-6任意一项所述基于react框架下canvas实现区域画框识别方法的基于react框架下canvas实现区域画框识别系统，其特征在于，所述基于react框架下canvas实现区域画框识别系统包括：
输入模块，用于利用EasyWarmPlayer读取后台推送的视频流播放摄像头播放内容并展示；
区域绘制模块，用于根据选择的绘制区域类型实现不同的操作，包括矩形绘制、椭圆或圆形绘制、多边形绘制三种方式；
修改模块，用于针对区域算法框进行修改和删除。
8.一种计算机设备，其特征在于，所述计算机设备包括存储器和处理器，所述存储器存储有计算机程序，所述计算机程序被所述处理器执行时，使得所述处理器执行如权利要求1-6任意一项所述基于react框架下canvas实现区域画框识别方法的步骤。
9.一种计算机可读存储介质，存储有计算机程序，所述计算机程序被处理器执行时，使得所述处理器执行如权利要求1-6任意一项所述基于react框架下canvas实现区域画框识别方法的步骤。
10.一种信息数据处理终端，其特征在于，所述信息数据处理终端用于实现如权利要求6所述基于react框架下canvas实现区域画框识别系统。
CN202211493067.4A 2022-11-25 2022-11-25 基于react框架下canvas实现区域画框识别方法、系统及终端 Pending CN116051670A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202211493067.4A CN116051670A (zh) 2022-11-25 2022-11-25 基于react框架下canvas实现区域画框识别方法、系统及终端

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202211493067.4A CN116051670A (zh) 2022-11-25 2022-11-25 基于react框架下canvas实现区域画框识别方法、系统及终端

Publications (1)

Publication Number Publication Date
CN116051670A true CN116051670A (zh) 2023-05-02

Family

ID=86118802

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202211493067.4A Pending CN116051670A (zh) 2022-11-25 2022-11-25 基于react框架下canvas实现区域画框识别方法、系统及终端

Country Status (1)

Country Link
CN (1) CN116051670A (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117241090A (zh) * 2023-11-15 2023-12-15 广东朝歌智慧互联科技有限公司 一种视频流中目标区域的信息生成方法和装置
CN117519888A (zh) * 2024-01-05 2024-02-06 成都泰盟软件有限公司 一种基于Web截图生成聊天记录文档的方法及系统

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117241090A (zh) * 2023-11-15 2023-12-15 广东朝歌智慧互联科技有限公司 一种视频流中目标区域的信息生成方法和装置
CN117241090B (zh) * 2023-11-15 2024-06-11 广东朝歌智慧互联科技有限公司 一种视频流中目标区域的信息生成方法和装置
CN117519888A (zh) * 2024-01-05 2024-02-06 成都泰盟软件有限公司 一种基于Web截图生成聊天记录文档的方法及系统

Similar Documents

Publication Publication Date Title
CN116051670A (zh) 基于react框架下canvas实现区域画框识别方法、系统及终端
US20210042558A1 (en) Electronic device and operating method thereof
CN109587560A (zh) 视频处理方法、装置、电子设备以及存储介质
CN109146991B (zh) 一种图片格式转换方法、装置、设备和存储介质
CN111770288A (zh) 视频编辑方法、装置、终端及存储介质
CN111860255A (zh) 驾驶检测模型的训练、使用方法、装置、设备及介质
AU2019283947B2 (en) Collaborative group video production system
WO2021232931A1 (zh) 频道切换方法、装置、设备、系统和存储介质
CN109361950A (zh) 视频处理方法、装置、电子设备及存储介质
CN112686973A (zh) 图像编辑方法及控制装置、存储介质、计算机设备
US20230133416A1 (en) Image processing method and apparatus, and device and medium
WO2024164675A1 (zh) 抠图方法、装置、电子设备以及存储介质
CN110841293A (zh) 一种自动动态输出游戏贴图合适度的方法和系统
CN108961268B (zh) 一种显著图计算方法及相关装置
WO2024094086A1 (zh) 图像处理方法、装置、设备、介质及产品
CN113918074A (zh) 一种用于自闭症儿童认知教学的光影实体交互装置及方法
CN111643901B (zh) 用于云游戏界面智能渲染的方法和装置
CN104008565B (zh) 一种利用cocos2d‑x以及HGE引擎播放Flash位图动画的系统和方法
JP2024025683A (ja) 画像における意味的対象領域の発見
CN104093069A (zh) 一种视频播放方法和播放器装置
CN111353822A (zh) 一种图像布局、模型训练方法、装置、设备及存储介质
CN116723353A (zh) 一种视频监控区域配置方法、系统、装置及可读存储介质
CN114419473B (zh) 一种基于嵌入式设备的深度学习实时目标检测方法
CN111800455B (zh) 一种基于局域网内不同主机数据源共享卷积神经网络的方法
CN115984838A (zh) Poi名称的生成方法、装置、电子设备和存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication