CN112328234B - 图像处理方法及装置 - Google Patents
图像处理方法及装置 Download PDFInfo
- Publication number
- CN112328234B CN112328234B CN202011204372.8A CN202011204372A CN112328234B CN 112328234 B CN112328234 B CN 112328234B CN 202011204372 A CN202011204372 A CN 202011204372A CN 112328234 B CN112328234 B CN 112328234B
- Authority
- CN
- China
- Prior art keywords
- image
- information
- file
- layer
- area
- 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.)
- Active
Links
- 238000003672 processing method Methods 0.000 title claims abstract description 22
- 238000000034 method Methods 0.000 claims abstract description 21
- 238000013461 design Methods 0.000 claims description 32
- 238000012545 processing Methods 0.000 claims description 28
- 238000003708 edge detection Methods 0.000 claims description 9
- 238000001914 filtration Methods 0.000 claims description 6
- 238000003709 image segmentation Methods 0.000 abstract 1
- 238000005520 cutting process Methods 0.000 description 11
- 238000010586 diagram Methods 0.000 description 11
- 230000006870 function Effects 0.000 description 9
- 230000008569 process Effects 0.000 description 5
- 238000004891 communication Methods 0.000 description 4
- 238000011161 development Methods 0.000 description 4
- 230000018109 developmental process Effects 0.000 description 4
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 238000001514 detection method Methods 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000000802 evaporation-induced self-assembly Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 230000001788 irregular Effects 0.000 description 1
- 230000009191 jumping Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 230000011218 segmentation Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- 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
- G06F3/04845—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 for image manipulation, e.g. dragging, rotation, expansion or change of colour
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Image Analysis (AREA)
Abstract
本申请实施例提供一种图像处理方法及装置,该方法包括:获取待处理文件的文件信息,所述文件信息中包括像素信息,所述像素信息中包括至少一个元素的像素信息;根据所述像素信息生成第一图像,所述第一图像中包括所述至少一个元素;获取所述第一图像对应的灰度图像,并确定每个元素在所述灰度图像中的区域信息;根据每个元素在所述灰度图像中的区域信息,从所述第一图像中获取每个元素对应的子图像。提高了对图像切分的效率,降低了所耗费的时间。
Description
技术领域
本申请实施例涉及图像处理技术领域,尤其涉及一种图像处理方法及装置。
背景技术
界面设计是为了满足软件需求而进行的规范化设计,例如面板设计、菜单设计等,是人机交互的重要部分。
在界面设计完成后,需要将界面上的按钮、图标、背景等元素进行切图,并标注好各种元素的位置信息。目前的切图方式,主要是由设计师手动针对各个元素进行切分,得到各个元素对应的图片以及位置信息后,由开发工程师实现界面。
目前的方案中,通过设计师手动切图的方式,效率较低,时间耗费较长。
发明内容
本申请实施例提供一种图像处理方法及装置,以解决目前的切图方式效率较低,时间耗费较长的问题。
第一方面,本申请实施例提供一种图像处理方法,包括:
获取待处理文件的文件信息,所述文件信息中包括像素信息,所述像素信息中包括至少一个元素的像素信息;
根据所述像素信息生成第一图像,所述第一图像中包括所述至少一个元素;
获取所述第一图像对应的灰度图像,并确定每个元素在所述灰度图像中的区域信息;
根据每个元素在所述灰度图像中的区域信息,从所述第一图像中获取每个元素对应的子图像。
在一种可能的实施方式中,所述方法还包括:
保存所述子图像的图像信息,其中,所述图像信息包括每个子图像的标识信息和每个子图像在所述第一图像中的区域信息。
在一种可能的实施方式中,确定每个元素在所述灰度图像中的区域信息,包括:
对所述灰度图像进行滤波处理,得到第二图像;
对所述第二图像进行边缘检测处理,以在所述第二图像中确定每个元素对应的轮廓线;
根据每个元素对应的轮廓线,确定每个元素在所述第二图像中的区域信息,其中,每个元素在所述灰度图像中的区域信息与在所述第二图像中的区域信息相同。
在一种可能的实施方式中,针对任意一个第一元素;根据所述第一元素对应的第一轮廓线,确定所述第一元素在所述第二图像中的区域信息,包括:
确定所述第一轮廓线的上边界线、下边界线、左边界线和右边界线;
根据所述上边界线、所述下边界线、所述左边界线和所述右边界线所围成的第一区域,确定所述第一元素在所述第二图像中的区域信息。
在一种可能的实施方式中,所述第一元素在所述第二图像中的区域信息包括:所述第一区域的长度、所述第一区域的宽度和所述第一区域中预设顶点在所述第二图像中的坐标。
在一种可能的实施方式中,所述文件信息中包括的所述像素信息为至少一个图层的像素信息,每个图层中包括至少一个元素;根据所述像素信息生成第一图像,包括:
根据所述每个图层的像素信息,生成对应的第一图像,其中,所述第一图像中包括对应的图层中的每个元素。
在一种可能的实施方式中,所述文件信息中还包括所述至少一个图层的图层数量和/或每个图层的标识。
在一种可能的实施方式中,所述图层的标识与该图层对应的子图像的标识相同。
第二方面,本申请实施例提供一种图像处理装置,包括:
第一获取模块,用于获取待处理文件的文件信息,所述文件信息中包括像素信息,所述像素信息中包括至少一个元素的像素信息;
生成模块,用于根据所述像素信息生成第一图像,所述第一图像中包括所述至少一个元素;
第二获取模块,用于获取所述第一图像对应的灰度图像,并确定每个元素在所述灰度图像中的区域信息;
处理模块,用于根据每个元素在所述灰度图像中的区域信息,从所述第一图像中获取每个元素对应的子图像。
在一种可能的实施方式中,所述处理模块还用于:
保存所述子图像的图像信息,其中,所述图像信息包括每个子图像的标识信息和每个子图像在所述第一图像中的区域信息。
在一种可能的实施方式中,所述第二获取模块具体用于:
对所述灰度图像进行滤波处理,得到第二图像;
对所述第二图像进行边缘检测处理,以在所述第二图像中确定每个元素对应的轮廓线;
根据每个元素对应的轮廓线,确定每个元素在所述第二图像中的区域信息,其中,每个元素在所述灰度图像中的区域信息与在所述第二图像中的区域信息相同。
在一种可能的实施方式中,针对任意一个第一元素;所述第二获取模块具体用于:
确定所述第一轮廓线的上边界线、下边界线、左边界线和右边界线;
根据所述上边界线、所述下边界线、所述左边界线和所述右边界线所围成的第一区域,确定所述第一元素在所述第二图像中的区域信息。
在一种可能的实施方式中,所述第一元素在所述第二图像中的区域信息包括:所述第一区域的长度、所述第一区域的宽度和所述第一区域中预设顶点在所述第二图像中的坐标。
在一种可能的实施方式中,所述文件信息中包括的所述像素信息为至少一个图层的像素信息,每个图层中包括至少一个元素;所述生成模块具体用于:
根据所述每个图层的像素信息,生成对应的第一图像,其中,所述第一图像中包括对应的图层中的每个元素。
在一种可能的实施方式中,所述文件信息中还包括所述至少一个图层的图层数量和/或每个图层的标识。
在一种可能的实施方式中,所述图层的标识与该图层对应的子图像的标识相同。
第三方面,本申请实施例提供一种图像处理设备,包括:
存储器,用于存储程序;
处理器,用于执行所述存储器存储的所述程序,当所述程序被执行时,所述处理器用于执行如第一方面中任一所述的图像处理方法。
第四方面,本申请实施例提供一种计算机可读存储介质,包括指令,当其在计算机上运行时,使得计算机执行如第一方面中任一所述的图像处理方法。
本申请实施例提供的图像处理方法及装置,首先获取待处理文件的文件信息,该文件信息中包括至少一个元素的像素信息,然后,根据该像素信息生成第一图像,第一图像中包括这至少一个元素。得到第一图像后,获取第一图像对应的灰度图像,并确定每个元素在灰度图像中的区域信息,根据该区域信息从第一图像中获取每个元素对应的子图像。通过上述方案,无需设计师手动切图,即可实现对元素的切分,得到每个元素对应的子图像,切图效率较高,时间耗费较短。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍,显而易见地,下面描述中的附图是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1为本申请实施例提供的一种应用场景示意图;
图2为本申请实施例提供的图像处理方法的流程示意图;
图3为本申请实施例提供的第一图像的处理示意图一;
图4为本申请实施例提供的第一图像的处理示意图二;
图5为本申请实施例提供的第一图像的处理示意图三;
图6为本申请实施例提供的第一图像的处理示意图四;
图7为本申请实施例提供的图像处理装置的结构示意图;
图8为本申请实施例提供的图像处理设备的硬件结构示意图。
具体实施方式
为使本申请实施例的目的、技术方案和优点更加清楚,下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例是本申请一部分实施例,而不是全部的实施例。基于本申请中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本申请保护的范围。
图1为本申请实施例提供的一种应用场景示意图,如图1所示,示意了一张由设计师完成的设计稿11,设计稿11为设计的一张界面图,其上包括多个按钮、菜单等元素。
在设计稿11上,不同的按钮或者菜单经开发工程师实现后,具备不同的功能。例如,设计稿11上包括一个提交按钮12,若用户点击提交按钮12,则电子设备上进行响应,提交相关数据。例如,设计稿11上包括一个链接菜单13,若用户点击链接菜单13,则电子设备进行响应,跳转到某一页面。
需要说明的是,上述按钮或菜单的功能,需要开发工程师实现该界面后才能进行响应。设计稿11并不能对用户的操作进行上述响应。在设计稿11设计完成后,需要对设计稿11进行切图操作,得到设计稿11上的各个元素对应的图片以及这各个图片在设计稿11上的相应位置。根据各个元素对应的图片以及这各个图片在设计稿11上的相应位置,后续才能将设计稿11变成相应的界面实现。
目前对设计稿11进行切图操作的方案,主要由设计师来完成。例如,设计师在完成设计稿11后,借助切图工具,对每个元素进行切分,然后输出切分的图片以及切分的图片在原设计稿11上的位置信息。
上述方案的缺点是,需要设计师手动进行设计稿的切分,效率低下,耗费的时间较长,尤其在设计稿11上存在多个元素时,更为明显。
为解决上述问题,本申请实施例提供一种图像处理方案,提高切图的效率,降低切图所耗费的时间。下面将结合附图对本申请的方案进行介绍。
图2为本申请实施例提供的图像处理方法的流程示意图,如图2所示,包括:
S21,获取待处理文件的文件信息,所述文件信息中包括像素信息,所述像素信息中包括至少一个元素的像素信息。
待处理文件即为设计师完成的界面设计稿,设计稿中可能包括一个或多个元素,每个元素为设计师设计的界面上的按钮、菜单等等。
根据待处理文件可以获取对应的文件信息,该文件信息中包括至少一个元素的像素信息。
S22,根据所述像素信息生成第一图像,所述第一图像中包括所述至少一个元素。
根据文件信息获取了像素信息之后,根据元素的像素信息,即可得到该待处理文件对应的第一图像,第一图像中包括待处理文件中的各个元素,以及背景。
S23,获取所述第一图像对应的灰度图像,并确定每个元素在所述灰度图像中的区域信息。
在第一图像中,不同的元素的像素信息可能不同,而背景处是透明的,没有具体的像素值,因此在各个元素的边缘处的像素点的像素值可能会受背景处的影响,导致对第一图像中的元素的边缘识别不准确。因此,本申请实施例中,可以首先获取第一图像对应的灰度图像,使得各个元素以及背景处的像素点均有对应的像素值,有利于后续各个元素的边缘的识别。
在获取了第一图像对应的灰度图像之后,就可以确定每个元素在灰度图像中的区域信息,该区域信息包括每个元素在灰度图像中的位置以及大小。由于灰度图像是通过第一图像得来的,各个元素在第一图像上的位置以及大小,与在灰度图像上的位置以及大小是不变的,因此各个元素在灰度图像中的区域信息与在第一图像中的区域信息是相同的。
S24,根据每个元素在所述灰度图像中的区域信息,从所述第一图像中获取每个元素对应的子图像。
由于各个元素在灰度图像中的区域信息与在第一图像中的区域信息是相同的,因此在确定了每个元素在灰度图像中的区域信息之后,根据该区域信息,就可以从第一图像中获取每个元素对应的子图像,即完成了对待处理文件中的元素的切分。开发工程师根据每个子图像,即可将待处理文件中的第一图像进行还原,并具备相应的功能。
本申请实施例提供的图像处理方法,首先获取待处理文件的文件信息,该文件信息中包括至少一个元素的像素信息,然后,根据该像素信息生成第一图像,第一图像中包括这至少一个元素。得到第一图像后,获取第一图像对应的灰度图像,并确定每个元素在灰度图像中的区域信息,根据该区域信息从第一图像中获取每个元素对应的子图像。通过上述方案,无需设计师手动切图,即可实现对元素的切分,得到每个元素对应的子图像,切图效率较高,时间耗费较短。
下面将结合附图对本申请的方案进行详细介绍。
当设计师完成设计稿后,设计稿是以文件的形式存储的,即待处理文件。首先需要获取待处理文件的文件信息,该文件信息中包括至少一个图层的像素信息,以及图层的数量,以及每个图层的标识,其中,每个图层中包括至少一个元素。
具体的,可以以插件的形式,通过设计软件提供的接口来获取待处理文件的文件信息。设计软件可以是不同的设计软件,例如Photoshop、Sketch等。不同的设计软件提供的接口可能不同,例如Photoshop是通过Adobe Photoshop CC SDK提供的接口读取数据获取文件信息的,Sketch是通过Sketch API提供接口读取数据获取文件信息的。使用相应的设计软件提供的接口,可以读取到待处理文件的文件信息,包括各个图层的数据。图层的数据例如可以包括图层的像素信息、图层的数量和图层的标识等等。
在得到待处理文件的文件信息后,可以将其保存,得到第一图像。
可选的,可以读取该文件信息,将文件信息中的各个图层的数据导出,保存成图片的格式,得到第一图像。在获取了各个元素的像素信息之后,根据该像素信息生成第一图像。其中,文件信息中包括的像素信息为至少一个图层的像素信息,每个图层中包括至少一个元素。根据每个图层的像素信息,均可以生成对应的第一图像,第一图像中包括对应的图层中的每个元素。
具体的,每个图层会对应生成一个第一图像。例如,文件信息中包括图层A和图层B,图层A中包括了设计师设计的按钮1和按钮2,图层B包括了设计师设计的图标1和图标2,则根据图层A的数据可以生成相应的图层照片A,根据图层B的数据可以生成相应的图层照片B。可以将文件信息中的各个图层的数据导出,保存成WebP格式,也可以保存成其他图片格式,例如PNG格式。采用WebP格式,能够有效节省占用空间。
导出图层的数据,得到第一图像后,可以删除导出的图层的数据,以节省磁盘空间。
在得到第一图像后,需要从第一图像中获取每个元素对应的子图像。下面将结合图3对该过程进行说明。
图3为本申请实施例提供的第一图像的处理示意图一,如图3所示,包括第一图像30,第一图像30上包括多个元素,图3中示意了元素31、元素32、元素33和元素34,以及背景。
可选的,可以首先将第一图像30转换成对应的灰度图像。这是由于,当生成第一图像30后,背景处是透明的,没有具体的像素值,而元素31、元素32、元素33和元素34处的像素点有具体的像素值。在各个元素的边缘处的像素点的像素值可能会受背景处的影响,导致后续各个元素的边缘识别不准确。
在将第一图像30转换成对应的灰度图像之后,元素31、元素32、元素33和元素34,以及背景处的像素点均有具体的像素值,有利于后续元素边缘的识别。
在获取第一图像30对应的灰度图像之后,在灰度图像中确定每个元素在灰度图像中的区域信息,然后根据每个元素的区域信息从第一图像30中得到每个元素对应的子图像。
可选的,在获取第一图像30对应的灰度图像之后,可以对该灰度图像进行滤波处理,得到第二图像。其中,滤波处理例如可以为对灰度图像中的各个元素的边缘进行模糊处理,以摆脱噪点。例如,可以采用opencv库的blur函数对该灰度图像进行模糊处理。
在对灰度图像进行滤波处理,得到第二图像之后,可以对第二图像进行边缘检测处理,以在第二图像中确定每个元素对应的轮廓线。由于对灰度图像进行了滤波处理,灰度图像中的各个元素的边缘进行了模糊处理,因此对第二图像进行边缘检测处理时,能够有效避免将各个元素的边缘被剪裁出去,保证各个元素的完整性。边缘检测的方式有多重,例如可以采用CANNY算法进行边缘检测,然后将边缘检测的结果作为参数输入轮廓检测函数中得到轮廓,轮廓检测函数例如可以为opencv库中的findContours函数等。
在第二图像中确定了每个元素对应的轮廓线之后,可以根据每个元素对应的轮廓线,确定每个元素在第二图像中的区域信息。其中,每个元素在所述灰度图像中的区域信息与在所述第二图像中的区域信息相同。下面将结合图4进行说明。
图4为本申请实施例提供的第一图像的处理示意图二,如图4所示,第一图像30中,包括元素31、元素32、元素33和元素34。在对其进行边缘检测处理后,会采用多边形逼近各个元素的轮廓。
在图4中,以八边形进行逼近为例,在图像40中,分别示例了每个元素被不同大小的八边形进行边缘逼近的过程。其中,元素31被八边形41逼近,元素32被八边形42逼近,元素33被八边形43逼近,元素34被八边形44逼近。
需要说明的是,图4中示例的仅仅是以八边形进行逼近,实际中,可以选择其他的多边形,甚至是不规则的多边形进行逼近均可,本申请实施例对此不做特别限定。
在得到各个元素被多边形逼近的轮廓线之后,针对任意一个第一元素,可以确定第一元素的第一轮廓线的上边界线、下边界线、左边界线和右边界线,然后根据上边界线、下边界线、左边界线和右边界线所围成的第一区域,确定第一元素在第二图像中的区域信息。其中,区域信息包括元素的位置和大小。可以将上边界线、下边界线、左边界线和右边界线所围成的第一区域,确定为第一元素所在的区域,第一元素所在的区域,反映了第一元素的位置和大小。
图5为本申请实施例提供的第一图像的处理示意图三,如图5所示,在确定了各个元素对应的八边形轮廓线之后,可以确定每个元素在第二图像中的区域信息,如图5中示意,在图像50中,元素31的区域信息如区域51示意,元素32的区域信息如区域52示意,元素33的区域信息如为区域53,元素34对应的区域为区域54,等等。
在确定了每个元素对应的区域信息之后,可以根据该区域信息在第一图像中获取每个元素对应的子图像,并保存该子图像的图像信息,其中,子图像的图像信息包括每个子图像的标识信息和子图像在第一图像中的区域信息。针对任意第一元素的第一区域,该区域信息包括第一区域的长度、第一区域的宽度和第一区域中预设顶点在第二图像中的坐标。
图6为本申请实施例提供的第一图像的处理示意图四,如图6所示,在对图像50中的元素进行切分之后,得到四个子图像,其中还示意了每个子图像的区域信息,其中,元素31对应的子图像的区域信息为(x1,y1,w1,h1),元素32对应的子图像的区域信息为(x2,y2,w2,h2),元素33对应的子图像的区域信息为(x3,y3,w3,h3),元素34对应的子图像的区域信息为(x4,y4,w4,h4),等等。其中,(x,y)表示对应的子图像的顶点在第二图像上的坐标,w表示对应的子图像的长度,h表示对应的子图像的宽度。
本申请实施例提供的图像处理方法,首先获取待处理文件的文件信息,该文件信息中包括至少一个元素的像素信息,然后,根据该像素信息生成第一图像,第一图像中包括这至少一个元素。得到第一图像后,获取第一图像对应的灰度图像,并确定每个元素在灰度图像中的区域信息,根据该区域信息从第一图像中获取每个元素对应的子图像。通过上述方案,无需设计师手动切图,即可实现对元素的切分,得到每个元素对应的子图像,切图效率较高,时间耗费较短。
图7为本申请实施例提供的图像处理装置的结构示意图,如图7所示,包括:
第一获取模块71,用于获取待处理文件的文件信息,所述文件信息中包括像素信息,所述像素信息中包括至少一个元素的像素信息;
生成模块72,用于根据所述像素信息生成第一图像,所述第一图像中包括所述至少一个元素;
第二获取模块73,用于获取所述第一图像对应的灰度图像,并确定每个元素在所述灰度图像中的区域信息;
处理模块74,用于根据每个元素在所述灰度图像中的区域信息,从所述第一图像中获取每个元素对应的子图像。
在一种可能的实施方式中,所述处理模块74还用于:
保存所述子图像的图像信息,其中,所述图像信息包括每个子图像的标识信息和每个子图像在所述第一图像中的区域信息。
在一种可能的实施方式中,所述第二获取模块73具体用于:
对所述灰度图像进行滤波处理,得到第二图像;
对所述第二图像进行边缘检测处理,以在所述第二图像中确定每个元素对应的轮廓线;
根据每个元素对应的轮廓线,确定每个元素在所述第二图像中的区域信息,其中,每个元素在所述灰度图像中的区域信息与在所述第二图像中的区域信息相同。
在一种可能的实施方式中,针对任意一个第一元素;所述第二获取模块73具体用于:
确定所述第一轮廓线的上边界线、下边界线、左边界线和右边界线;
根据所述上边界线、所述下边界线、所述左边界线和所述右边界线所围成的第一区域,确定所述第一元素在所述第二图像中的区域信息。
在一种可能的实施方式中,所述第一元素在所述第二图像中的区域信息包括:所述第一区域的长度、所述第一区域的宽度和所述第一区域中预设顶点在所述第二图像中的坐标。
在一种可能的实施方式中,所述文件信息中包括的所述像素信息为至少一个图层的像素信息,每个图层中包括至少一个元素;所述生成模块72具体用于:
根据所述每个图层的像素信息,生成对应的第一图像,其中,所述第一图像中包括对应的图层中的每个元素。
在一种可能的实施方式中,所述文件信息中还包括所述至少一个图层的图层数量和/或每个图层的标识。
在一种可能的实施方式中,所述图层的标识与该图层对应的子图像的标识相同。
本申请实施例提供的装置,可用于执行上述方法实施例的技术方案,其实现原理和技术效果类似,此处不再赘述。
图8为本申请实施例提供的图像处理设备的硬件结构示意图,如图8所示,该图像处理设备包括:至少一个处理器81和存储器82。其中,处理器81和存储器82通过总线83连接。
可选地,该模型确定还包括通信部件。例如,通信部件可以包括接收器和/或发送器。
在具体实现过程中,至少一个处理器81执行所述存储器82存储的计算机执行指令,使得至少一个处理器81执行如上的图像处理方法。
处理器81的具体实现过程可参见上述方法实施例,其实现原理和技术效果类似,本实施例此处不再赘述。
在上述图8所示的实施例中,应理解,处理器可以是中央处理单元(英文:CentralProcessing Unit,简称:CPU),还可以是其他通用处理器、数字信号处理器(英文:DigitalSignal Processor,简称:DSP)、专用集成电路(英文:Application Specific IntegratedCircuit,简称:ASIC)等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合申请所公开的方法的步骤可以直接体现为硬件处理器执行完成,或者用处理器中的硬件及软件模块组合执行完成。
存储器可能包含高速RAM存储器,也可能还包括非易失性存储NVM,例如至少一个磁盘存储器。
总线可以是工业标准体系结构(Industry Standard Architecture,ISA)总线、外部设备互连(Peripheral Component,PCI)总线或扩展工业标准体系结构(ExtendedIndustry Standard Architecture,EISA)总线等。总线可以分为地址总线、数据总线、控制总线等。为便于表示,本申请附图中的总线并不限定仅有一根总线或一种类型的总线。
本申请还提供一种计算机可读存储介质,所述计算机可读存储介质中存储有计算机执行指令,当处理器执行所述计算机执行指令时,实现如上所述的图像处理方法。
上述的计算机可读存储介质,上述可读存储介质可以是由任何类型的易失性或非易失性存储设备或者它们的组合实现,如静态随机存取存储器(SRAM),电可擦除可编程只读存储器(EEPROM),可擦除可编程只读存储器(EPROM),可编程只读存储器(PROM),只读存储器(ROM),磁存储器,快闪存储器,磁盘或光盘。可读存储介质可以是通用或专用计算机能够存取的任何可用介质。
一种示例性的可读存储介质耦合至处理器,从而使处理器能够从该可读存储介质读取信息,且可向该可读存储介质写入信息。当然,可读存储介质也可以是处理器的组成部分。处理器和可读存储介质可以位于专用集成电路(Application Specific IntegratedCircuits,简称:ASIC)中。当然,处理器和可读存储介质也可以作为分立组件存在于设备中。
所述单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口,装置或单元的间接耦合或通信连接,可以是电性,机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外,在本申请各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。
所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在一个计算机可读取存储介质中。基于这样的理解,本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括:U盘、移动硬盘、只读存储器(ROM,Read-Only Memory)、随机存取存储器(RAM,Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。
本领域普通技术人员可以理解:实现上述各方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成。前述的程序可以存储于一计算机可读取存储介质中。该程序在执行时,执行包括上述各方法实施例的步骤;而前述的存储介质包括:ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。
最后应说明的是:以上各实施例仅用以说明本申请的技术方案,而非对其限制;尽管参照前述各实施例对本申请进行了详细的说明,本领域的普通技术人员应当理解:其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分或者全部技术特征进行等同替换;而这些修改或者替换,并不使相应技术方案的本质脱离本申请各实施例技术方案的范围。
Claims (11)
1.一种图像处理方法,其特征在于,包括:
获取待处理文件的文件信息,所述文件信息中包括像素信息,所述像素信息中包括至少一个元素的像素信息,所述待处理文件为设计师完成的界面设计稿,所述设计稿中包括一个或多个元素,每个元素为所述设计师设计的界面上的按钮、菜单;
根据所述像素信息生成第一图像,所述第一图像中包括所述至少一个元素;
获取所述第一图像对应的灰度图像,并确定每个元素在所述灰度图像中的区域信息,所述区域信息包括每个元素在所述灰度图像中的位置及大小;
根据每个元素在所述灰度图像中的区域信息,从所述第一图像中获取每个元素对应的子图像。
2.根据权利要求1所述的方法,其特征在于,所述方法还包括:
保存所述子图像的图像信息,其中,所述图像信息包括每个子图像的标识信息和每个子图像在所述第一图像中的区域信息。
3.根据权利要求1所述的方法,其特征在于,确定每个元素在所述灰度图像中的区域信息,包括:
对所述灰度图像进行滤波处理,得到第二图像;
对所述第二图像进行边缘检测处理,以在所述第二图像中确定每个元素对应的轮廓线;
根据每个元素对应的轮廓线,确定每个元素在所述第二图像中的区域信息,其中,每个元素在所述灰度图像中的区域信息与在所述第二图像中的区域信息相同。
4.根据权利要求3所述的方法,其特征在于,针对任意一个第一元素;根据所述第一元素对应的第一轮廓线,确定所述第一元素在所述第二图像中的区域信息,包括:
确定所述第一轮廓线的上边界线、下边界线、左边界线和右边界线;
根据所述上边界线、所述下边界线、所述左边界线和所述右边界线所围成的第一区域,确定所述第一元素在所述第二图像中的区域信息。
5.根据权利要求4所述的方法,其特征在于,所述第一元素在所述第二图像中的区域信息包括:所述第一区域的长度、所述第一区域的宽度和所述第一区域中预设顶点在所述第二图像中的坐标。
6.根据权利要求1-5任一项所述的方法,其特征在于,所述文件信息中包括的所述像素信息为至少一个图层的像素信息,每个图层中包括至少一个元素;根据所述像素信息生成第一图像,包括:
根据所述每个图层的像素信息,生成对应的第一图像,其中,所述第一图像中包括对应的图层中的每个元素。
7.根据权利要求6所述的方法,其特征在于,所述文件信息中还包括所述至少一个图层的图层数量和/或每个图层的标识。
8.根据权利要求7所述的方法,其特征在于,所述图层的标识与该图层对应的子图像的标识相同。
9.一种图像处理装置,其特征在于,包括:
第一获取模块,用于获取待处理文件的文件信息,所述文件信息中包括像素信息,所述像素信息中包括至少一个元素的像素信息,所述待处理文件为设计师完成的界面设计稿,所述设计稿中包括一个或多个元素,每个元素为所述设计师设计的界面上的按钮、菜单;
生成模块,用于根据所述像素信息生成第一图像,所述第一图像中包括所述至少一个元素;
第二获取模块,用于获取所述第一图像对应的灰度图像,并确定每个元素在所述灰度图像中的区域信息,所述区域信息包括每个元素在所述灰度图像中的位置及大小;
处理模块,用于根据每个元素在所述灰度图像中的区域信息,从所述第一图像中获取每个元素对应的子图像。
10.一种图像处理设备,其特征在于,包括:
存储器,用于存储程序;
处理器,用于执行所述存储器存储的所述程序,当所述程序被执行时,所述处理器用于执行如权利要求1至8中任一所述的图像处理方法。
11.一种计算机可读存储介质,其特征在于,包括指令,当其在计算机上运行时,使得计算机执行如权利要求1至8中任一所述的图像处理方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011204372.8A CN112328234B (zh) | 2020-11-02 | 2020-11-02 | 图像处理方法及装置 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011204372.8A CN112328234B (zh) | 2020-11-02 | 2020-11-02 | 图像处理方法及装置 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN112328234A CN112328234A (zh) | 2021-02-05 |
CN112328234B true CN112328234B (zh) | 2023-12-08 |
Family
ID=74324276
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202011204372.8A Active CN112328234B (zh) | 2020-11-02 | 2020-11-02 | 图像处理方法及装置 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN112328234B (zh) |
Citations (9)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102663360A (zh) * | 2012-03-30 | 2012-09-12 | 中南大学 | 一种钢铁板坯编码自动识别方法以及钢铁板坯跟踪系统 |
CN105096354A (zh) * | 2014-05-05 | 2015-11-25 | 腾讯科技(深圳)有限公司 | 一种图像处理的方法和装置 |
CN108984172A (zh) * | 2018-05-31 | 2018-12-11 | 北京奇艺世纪科技有限公司 | 一种界面文件的生成方法及装置 |
CN109558557A (zh) * | 2018-11-23 | 2019-04-02 | 京华信息科技股份有限公司 | 一种基于图像识别的移动建模方法、装置及存储介质 |
CN110069257A (zh) * | 2019-04-25 | 2019-07-30 | 腾讯科技(深圳)有限公司 | 一种界面处理方法、装置及终端 |
CN111127543A (zh) * | 2019-12-23 | 2020-05-08 | 北京金山安全软件有限公司 | 图像处理方法、装置、电子设备以及存储介质 |
CN111338733A (zh) * | 2020-02-25 | 2020-06-26 | 珠海格力电器股份有限公司 | 用户界面适配方法和系统 |
CN111414165A (zh) * | 2019-01-06 | 2020-07-14 | 阿里巴巴集团控股有限公司 | 界面代码的生成方法及设备 |
CN111741211A (zh) * | 2019-03-25 | 2020-10-02 | 华为技术有限公司 | 图像显示方法和设备 |
Family Cites Families (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US10586400B2 (en) * | 2018-02-23 | 2020-03-10 | Robert E Douglas | Processing 3D medical images to enhance visualization |
-
2020
- 2020-11-02 CN CN202011204372.8A patent/CN112328234B/zh active Active
Patent Citations (9)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102663360A (zh) * | 2012-03-30 | 2012-09-12 | 中南大学 | 一种钢铁板坯编码自动识别方法以及钢铁板坯跟踪系统 |
CN105096354A (zh) * | 2014-05-05 | 2015-11-25 | 腾讯科技(深圳)有限公司 | 一种图像处理的方法和装置 |
CN108984172A (zh) * | 2018-05-31 | 2018-12-11 | 北京奇艺世纪科技有限公司 | 一种界面文件的生成方法及装置 |
CN109558557A (zh) * | 2018-11-23 | 2019-04-02 | 京华信息科技股份有限公司 | 一种基于图像识别的移动建模方法、装置及存储介质 |
CN111414165A (zh) * | 2019-01-06 | 2020-07-14 | 阿里巴巴集团控股有限公司 | 界面代码的生成方法及设备 |
CN111741211A (zh) * | 2019-03-25 | 2020-10-02 | 华为技术有限公司 | 图像显示方法和设备 |
CN110069257A (zh) * | 2019-04-25 | 2019-07-30 | 腾讯科技(深圳)有限公司 | 一种界面处理方法、装置及终端 |
CN111127543A (zh) * | 2019-12-23 | 2020-05-08 | 北京金山安全软件有限公司 | 图像处理方法、装置、电子设备以及存储介质 |
CN111338733A (zh) * | 2020-02-25 | 2020-06-26 | 珠海格力电器股份有限公司 | 用户界面适配方法和系统 |
Non-Patent Citations (5)
Title |
---|
Security of grayscale images by VSS with novel method of bit-plane slicing;Aditi Y. Patil等;《2016 Conference on Emerging Devices and Smart Systems (ICEDSS)》;全文 * |
图像文字定位与提取技术研究;秦伟;《中国优秀硕士学位论文全文数据库 (信息科技辑)》(第07期);I138-1656 * |
基于Android的棒材图像识别计数与实现;臧林劼;《中国优秀硕士学位论文全文数据库 (信息科技辑)》(第02期);I138-2130 * |
基于灰度图像的边缘提取设计与再现;丛爽等;科技》;第19卷;第397-401页 * |
计算机图像处理技;耿甜等;《无线互联科技》;第15卷;第133-134页 * |
Also Published As
Publication number | Publication date |
---|---|
CN112328234A (zh) | 2021-02-05 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
JP2007183742A (ja) | 画像処理装置、画像処理方法、コンピュータプログラム | |
CN111640123B (zh) | 无背景图像的生成方法、装置、设备及介质 | |
US20120280996A1 (en) | Method and system for rendering three dimensional views of a scene | |
CN111583381B (zh) | 游戏资源图的渲染方法、装置及电子设备 | |
CN108021863B (zh) | 电子装置、基于图像的年龄分类方法及存储介质 | |
CN112991377A (zh) | 一种基于opencv和shader融合技术的抠像算法 | |
CN111652266A (zh) | 用户界面组件的识别方法、装置、电子设备和存储介质 | |
CN110766068B (zh) | 一种验证码识别方法及计算设备 | |
CN114241105A (zh) | 界面渲染方法、装置、设备和计算机可读存储介质 | |
CN112328234B (zh) | 图像处理方法及装置 | |
CN112598687B (zh) | 图像分割方法和装置、存储介质、电子设备 | |
CN116976372A (zh) | 基于方形基准码的图片识别方法、装置、设备及介质 | |
CN110543799A (zh) | 二维码处理方法、装置、存储介质与移动终端 | |
CN110909816A (zh) | 图片识别方法和装置 | |
CN110942488A (zh) | 图像处理装置、图像处理系统、图像处理方法及记录介质 | |
CN115829929A (zh) | 产品表面图像的缺陷检测方法、装置、设备及存储介质 | |
CN114529626A (zh) | 图像处理方法、装置及电子设备 | |
CN114627225A (zh) | 图形渲染方法、装置及存储介质 | |
CN113971738A (zh) | 图像检测方法、装置、电子设备及存储介质 | |
JP2007334876A (ja) | 文書イメージ処理システムおよび文書イメージ処理方法 | |
CN111739084B (zh) | 图片处理方法、图集处理方法、计算机设备和存储介质 | |
CN112560530A (zh) | 一种二维码处理方法、设备、介质及电子设备 | |
CN111526263B (zh) | 图像处理方法、装置及计算机系统 | |
CN117033239B (zh) | 一种控件匹配方法、装置、计算机设备及存储介质 | |
CN111144066B (zh) | 字库字面的调整方法、装置、设备和存储介质 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |