CN113792238A - Svg图像的处理方法及装置、存储介质和处理器 - Google Patents
Svg图像的处理方法及装置、存储介质和处理器 Download PDFInfo
- Publication number
- CN113792238A CN113792238A CN202111088415.5A CN202111088415A CN113792238A CN 113792238 A CN113792238 A CN 113792238A CN 202111088415 A CN202111088415 A CN 202111088415A CN 113792238 A CN113792238 A CN 113792238A
- Authority
- CN
- China
- Prior art keywords
- svg
- file
- svg image
- image
- page
- 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
Links
- 238000003672 processing method Methods 0.000 title claims abstract description 27
- 238000003860 storage Methods 0.000 title claims abstract description 22
- 238000012545 processing Methods 0.000 claims abstract description 96
- 238000000034 method Methods 0.000 claims abstract description 61
- 238000001914 filtration Methods 0.000 claims description 12
- 238000004458 analytical method Methods 0.000 claims description 8
- 238000011161 development Methods 0.000 abstract description 18
- 230000008569 process Effects 0.000 abstract description 17
- 238000005516 engineering process Methods 0.000 abstract description 13
- 238000010586 diagram Methods 0.000 description 18
- 238000004590 computer program Methods 0.000 description 10
- 230000006870 function Effects 0.000 description 5
- 230000003287 optical effect Effects 0.000 description 3
- 230000004048 modification Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 238000012546 transfer Methods 0.000 description 2
- RTAQQCXQSZGOHL-UHFFFAOYSA-N Titanium Chemical compound [Ti] RTAQQCXQSZGOHL-UHFFFAOYSA-N 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 239000003086 colorant Substances 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000010365 information processing Effects 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 238000005096 rolling process Methods 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 229910052719 titanium Inorganic materials 0.000 description 1
- 239000010936 titanium Substances 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
- G06F16/986—Document structures and storage, e.g. HTML extensions
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Processing Or Creating Images (AREA)
Abstract
本申请公开了一种SVG图像的处理方法及装置、存储介质和处理器。该方法包括：获取待查看的SVG图像文件夹的目录；遍历目录下的内容，得到遍历的内容；对遍历的内容进行解析，得到SVG图像数据；对SVG图像数据进行处理，得到SVG图像的页面元素；根据页面元素中的样式信息，生成页面元素的超文本标记语言文件，其中，超文本标记语言文件用于查看SVG图像。通过本申请，解决了相关技术中在前端开发过程中查看和引用SVG图像操作繁琐的问题。
Description
技术领域
本申请涉及信息处理技术领域，具体而言，涉及一种SVG图像的处理方法及装置、存储介质和处理器。
背景技术
随着前端技术的不断变革与发展，网页的设计中通常都会带有很多图标，从而丰富用户的体验，提升产品的使用感。在之前的开发过程中，我们通常会使用一些JPG,PNG等格式的图片用于页面的展示，但随着技术的成熟，在如今的项目开发过程中，或者在进行网页改版时，我们通常会使用SVG格式的图片。其中，SVG是一种图像文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。而且，SVG格式的图片与其他格式的图片相比，SVG格式的图片具有以下优点：
(1)SVG格式的图片是可伸缩的。用户可以任意缩放图像，且不会破坏图像的清晰度、细节等；
(2)SVG格式的图片相较于JPG、PNG和GIF等格式的图片，其尺寸更小，且可压缩性更强；
(3)SVG格式的图片有超强的显示效果，它在屏幕上显示时，图片边缘一直是清晰的，且适合任何屏幕分辨率；
(4)SVG格式的图片采用文本来描述对象，故可以用任何文字编辑器打开并修改。
但随着SVG图像的广泛使用，一个大型项目中，可能存在几百个SVG图像，由于SVG是矢量图，一般的图片查看工具无法打开。而且，当项目中不同的模块由不同的开发者进行开发时，由于一些操作按钮的图像会有相同，在实际的开发中，开发者通常会使用以下两种相关技术：相关技术一是在图片文件夹中挨个通过浏览器打开查看是否与当前模块的图像一致，如一致，则进行引用。如不一致，则下载一个新的图像放入项目中；相关技术二是安装第三方插件，安装此插件后即可以直接在文件系统内预览SVG图像，再在多个文件夹中进行查找，如有一致，则进行引用。如不一致，则下载一个新的图像放入项目中。
相关技术一中，通过浏览器预览SVG图像，即通过将单个SVG图像拖拽到浏览器或者以浏览器为打开方式，从而对SVG图像进行预览。例如，在市面上常见的Chrome、IE、Safari等浏览器上都可以直接展示SVG图像。但是，在大型项目中，SVG的图像数量众多，且分布在不同的图像文件夹中，故该技术存在以下缺点：通过浏览器对SVG图像进行逐个打开并查看，此操作繁琐，且耗费时间；且当项目中存在较多命名不同但展示相同或者只是颜色上有差异但图像结构相同的SVG图像时，无法清晰比对出SVG图像，只能新增图像文件，就会导致项目中图像文件数量越来越多，图像文件夹体积越来越大，从而导致项目体积的增大。
相关技术二中，通过在系统中安装第三方插件，此插件下载路径如下：https://github.com/tibold/svg-explorer-extension。该插件是Windows资源管理器的扩展模块，用于呈现SVG缩略图，便于预览SVG文件。Windows上安装完执行文件后，则可以在文件系统中像预览JPG/PNG这些图片一样预览SVG图像。该技术使开发者可以像使用其他格式的图片一样使用SVG图片，但由于windows文件系统的限制，使用此技术时，只能以一个文件夹的维度来预览图片，不能进行多个文件夹中SVG图像的比对。而当项目中存储图像的目录存在多层嵌套时，需频繁进行如下操作：进入文件夹查看图像，再进入更深层次文件夹，或再进行返回，在其他文件夹中去查看图像。所以，这些操作可能导致开发者无法清晰比对使用SVG图像，只能新增图像文件，仍然可能存在明显的冗余与重复现象。
针对相关技术中在前端开发过程中查看和引用SVG图像操作繁琐的问题，目前尚未提出有效的解决方案。
发明内容
本申请的主要目的在于提供一种SVG图像的处理方法及装置、存储介质和处理器，以解决相关技术中在前端开发过程中查看和引用SVG图像操作繁琐的问题。
为了实现上述目的，根据本申请的一个方面，提供了一种SVG图像的处理方法。该方法包括：获取待查看的SVG图像文件夹的目录；遍历所述目录下的内容，得到遍历的内容；对所述遍历的内容进行解析，得到SVG图像数据；对所述SVG图像数据进行处理，得到SVG图像的页面元素；根据所述页面元素中的样式信息，生成所述页面元素的超文本标记语言文件，其中，所述超文本标记语言文件用于查看所述SVG图像。
进一步地，对所述遍历的内容进行解析，得到SVG图像数据包括：若所述遍历的内容的类型是文件夹，则存储所述文件夹的信息；若所述遍历的内容的类型是文件，则判断所述文件的类型是否是SVG文件；若所述文件的类型不是SVG文件，则对所述文件进行过滤处理；若所述文件的类型是SVG文件，则将所述SVG文件与所述目录相关联，并存储所述SVG文件的信息。
进一步地，在对所述SVG图像数据进行处理，得到SVG图像的页面元素之后，所述方法还包括：对所述SVG图像的页面元素进行点击事件的绑定处理，得到绑定后的SVG图像的页面元素，其中，所述绑定后的SVG图像的页面元素用于对所述SVG图像的目录和名称信息进行复制操作。
进一步地，在根据所述页面元素的样式信息，生成所述页面元素的超文本标记语言文件之后，所述方法还包括：通过打开所述超文本标记语言文件，得到所述SVG图像的展示页面，其中，所述SVG图像依据SVG图像文件夹的名称进行分类，在所述展示页面进行展示；对所述展示页面中的目标SVG图像进行操作处理，得到目标SVG图像的目录和名称信息，其中，所述目录和名称信息被存入到剪切板中。
进一步地，在对所述SVG图像数据进行处理，得到SVG图像的页面元素之后，所述方法还包括：通过对所述SVG图像的页面元素进行样式排版处理，得到排版后的页面元素；根据所述排版后的页面元素，展示目标页面。
为了实现上述目的，根据本申请的另一方面，提供了一种SVG图像的处理装置。该装置包括：第一获取单元，用于获取待查看的SVG图像文件夹的目录；第一遍历单元，用于遍历所述目录下的内容，得到遍历的内容；第一解析单元，用于对所述遍历的内容进行解析，得到SVG图像数据；第一处理单元，用于对所述SVG图像数据进行处理，得到SVG图像的页面元素；第一生成单元，用于根据所述页面元素中的样式信息，生成所述页面元素的超文本标记语言文件，其中，所述超文本标记语言文件用于查看所述SVG图像。
进一步地，所述第一解析单元包括：第一存储模块，用于若所述遍历的内容的类型是文件夹，则存储所述文件夹的信息；第一判断模块，用于若所述遍历的内容的类型是文件，则判断所述文件的类型是否是SVG文件；第一过滤模块，用于若所述文件的类型不是SVG文件，则对所述文件进行过滤处理；第一处理模块，用于若所述文件的类型是SVG文件，则将所述SVG文件与所述目录相关联，并存储所述SVG文件的信息。
进一步地，所述装置还包括：第二处理单元，用于在对所述SVG图像数据进行处理，得到SVG图像的页面元素之后，对所述SVG图像的页面元素进行点击事件的绑定处理，得到绑定后的SVG图像的页面元素，其中，所述绑定后的SVG图像的页面元素用于对所述SVG图像的目录和名称信息进行复制操作。
进一步地，所述装置还包括：第一打开单元，用于在根据所述页面元素的样式信息，生成所述页面元素的超文本标记语言文件之后，通过打开所述超文本标记语言文件，得到所述SVG图像的展示页面，其中，所述SVG图像依据SVG图像文件夹的名称进行分类，在所述展示页面进行展示；第三处理单元，用于对所述展示页面中的目标SVG图像进行操作处理，得到目标SVG图像的目录和名称信息，其中，所述目录和名称信息被存入到剪切板中。
进一步地，所述装置还包括：第四处理单元，用于在对所述SVG图像数据进行处理，得到SVG图像的页面元素之后，通过对所述SVG图像的页面元素进行样式排版处理，得到排版后的页面元素；第一展示单元，用于根据所述排版后的页面元素，展示目标页面。
为了实现上述目的，根据本申请的另一方面，提供了一种处理器，所述处理器用于运行程序，其中，所述程序运行时执行上述的任意一项所述的SVG图像的处理方法。
为了实现上述目的，根据本申请的另一方面，提供了一种存储介质，所述存储介质包括存储的程序，其中，所述程序执行上述的任意一项所述的SVG图像的处理方法。
通过本申请，采用以下步骤：获取待查看的SVG图像文件夹的目录；遍历目录下的内容，得到遍历的内容；对遍历的内容进行解析，得到SVG图像数据；对SVG图像数据进行处理，得到SVG图像的页面元素；根据页面元素中的样式信息，生成页面元素的超文本标记语言文件，其中，超文本标记语言文件用于查看SVG图像，解决了相关技术中在前端开发过程中查看和引用SVG图像操作繁琐的问题。通过对SVG图像文件夹的目录下的内容进行解析和对SVG图像数据进行处理，得到SVG图像的页面元素，通过增加页面元素的样式信息生成一份超文本标记语言文件，通过生成的超文本标记语言文件即可清晰便捷的查看和引用整个项目中的所有SVG图像，进而达到了提升前端开发的效率。
附图说明
构成本申请的一部分的附图用来提供对本申请的进一步理解，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：
图1是根据本申请实施例提供的SVG图像的处理方法的流程图；
图2是根据本申请实施例提供的SVG图像的处理方法中数据处理的示意图；
图3是根据本申请实施例提供的可选的SVG图像的处理方法的方法步骤图；
图4是本申请实施例中的待查看的SVG图像文件夹的目录的示意图；
图5是本申请实施例中的超文本标记语言文件中的SVG图像的展示页面图；
图6是根据本申请实施例提供的SVG图像的处理方法的示意图；
图7是根据本申请实施例提供的SVG图像的处理装置的示意图。
具体实施方式
需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。
为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分的实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。
需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
根据本申请的实施例，提供了一种SVG图像的处理方法。
图1是根据本申请实施例提供的SVG图像的处理方法的流程图，如图1所示，该方法包括如下步骤：
步骤S101，获取待查看的SVG图像文件夹的目录。
例如，用户在使用图像处理装置之前，用户可以将项目中的待查看的SVG图像文件夹的目录传入到图像处理装置中。上述待查看的SVG图像文件夹的目录即为该文件夹的路径，此路径可以为该文件夹的绝对路径或相对路径。以上步骤即为图像处理装置获取待查看的SVG图像文件夹的目录的过程。
步骤S102，遍历目录下的内容，得到遍历的内容。
对待查看的SVG图像文件夹的目录下的所有内容依次进行访问查看，查找到相应的SVG文件。
步骤S103，对遍历的内容进行解析，得到SVG图像数据。
对查找到的SVG文件进行解析，得到SVG图像数据。
步骤S104，对SVG图像数据进行处理，得到SVG图像的页面元素。
对得到的SVG图像数据依次进行处理，根据处理结果，从而可以得到所有SVG图像的页面元素。
步骤S105，根据页面元素中的样式信息，生成页面元素的超文本标记语言文件，其中，超文本标记语言文件用于查看SVG图像。
例如，通过增加页面元素的样式信息，从而可以生成一份完整的页面元素的超文本标记语言文件。通过打开上述的超文本标记语言文件，可以在打开的页面上展示待查看的SVG图像文件夹的目录下的所有SVG图像。
通过上述的步骤S101至S105，通过对SVG图像文件夹的目录下的内容进行解析和对SVG图像数据进行处理，可以生成一份超文本标记语言文件，通过打开超文本标记语言文件和对SVG图像进行简单的操作，从而可以清晰便捷的查看和引用整个项目中的所有SVG图像，进而达到了提升前端开发的效率。
SVG图像的处理方法中数据处理的示意图，如图2所示，该图像处理装置主要分为三个部分，分别为解析部分，处理部分和展示部分。将项目中的待查看的SVG图像文件夹的路径信息传入到图像处理装置的解析部分中；解析部分遍历解析各层次的文件夹的内容，得到SVG图像数据；处理部分对SVG图像数据进行处理，得到SVG图像的页面元素；展示部分根据页面元素中的样式信息，生成用于查看SVG图像的超文本标记语言文件。
可选地，在本申请实施例提供的SVG图像的处理方法中，对遍历的内容进行解析，得到SVG图像数据包括：若遍历的内容的类型是文件夹，则存储文件夹的信息；若遍历的内容的类型是文件，则判断文件的类型是否是SVG文件；若文件的类型不是SVG文件，则对文件进行过滤处理；若文件的类型是SVG文件，则将SVG文件与目录相关联，并存储SVG文件的信息。
例如，图像处理装置首先判断遍历的内容是否是文件夹。如果该内容的类型是文件夹，则存储该文件夹的信息，并继续遍历该目录下的所有内容；若该内容的类型是文件，则判断该文件是不是SVG文件；若不是SVG文件，则将该文件过滤掉；若是SVG文件，则把该文件与当前的目录相关联，即对该文件的数据进行格式化处理，并且存储该文件的名称，内容等信息。
通过上述的方案，图像处理装置可以对遍历的内容进行分层解析，从而可以得到更加准确的SVG图像数据。
可选地，在本申请实施例提供的SVG图像的处理方法中，在对SVG图像数据进行处理，得到SVG图像的页面元素之后，该方法还包括：对SVG图像的页面元素进行点击事件的绑定处理，得到绑定后的SVG图像的页面元素，其中，绑定后的SVG图像的页面元素用于对SVG图像的目录和名称信息进行复制操作。
例如，图像处理装置可以对SVG图像的页面元素进行点击事件的绑定处理，得到绑定后的SVG图像的页面元素。在项目的后续使用中，用户可以直接点击SVG图像，即可将此SVG图像的目录和名称信息存放到剪切板中。
通过上述的方案，用户可以通过简单的操作，便捷的引用某个SVG图像，从而大大提高了开发者们引用图像的效率，进而提升了项目开发效率。而且，通过上述的方案，也可以使用户更易于比对SVG图像，从而快速去除重复图像，进而减少了项目的体积。
综上，以上步骤S101～S105和以上两个可选实施例如图3所示，此图为根据本申请实施例提供的可选的SVG图像的处理方法的方法步骤图。
可选地，在本申请实施例提供的SVG图像的处理方法中，在根据页面元素的样式信息，生成页面元素的超文本标记语言文件之后，该方法还包括：通过打开超文本标记语言文件，得到SVG图像的展示页面，其中，SVG图像依据SVG图像文件夹的名称进行分类，在展示页面进行展示；对展示页面中的目标SVG图像进行操作处理，得到目标SVG图像的目录和名称信息，其中，目录和名称信息被存入到剪切板中。
例如，在前端的大型项目中，用户通常会把所有项目中使用的图片放到一个特定的文件夹下面，比如取名为：images。而项目中包含很多模块，图片也会进行分类，比如会在images目录下新建button、common、table、tree等各个组件以及各个模块不同的目录，以此来分类表示按钮或表格或树中所用到的不同SVG图像，如图4所示，每个文件夹内都存放有SVG图像。
基于上述情况，用户可以传入上述images的目录(images的路径地址)到图像处理装置中，并执行图像处理装置，执行完成后，images路径下面，会生成一个HTML文件(超文本标记语言文件)。用户用浏览器打开该HTML文件(超文本标记语言文件)，显示页面上会挨个展示images所有子目录以及子目录下的所有的SVG图像，如果SVG图像数量过多，超出一个显示屏幕所能够显示的范围，则用户可以通过滚动鼠标滚轮，对SVG图像进行全面预览。其中，当对SVG图像进行全面预览时，部分SVG图像的预览界面如图5所示。
当用户开发模块时，查看当前页面，如果发现需要引用button路径下的SVG图像文件时，用户可以点击该图像，此时，如果用户在页面上设置了相对路径，则图像处理装置会将拼接的相对路径和图像文件名称存入剪切板中，如果用户没有设置相对路径，则图像处理装置会使用默认配置的路径存入剪切板中。最后，用户只需要在项目中直接粘贴即可便捷的引用需要的SVG图像文件。
通过上述的方案，在前端项目开发中，用户不需要安装任何软件，就可以清晰便捷的查看整个项目中的所有SVG图像，且用户通过简单的操作，可以便捷的引用某个SVG图像，从而大大提高了用户引用图像的效率，进而提升了开发效率。另外，从项目的角度来看，通过上述方案，用户可以清晰的发现项目中重复的SVG图像，同时对SVG图像进行统一后，可以便捷的删除不必要的SVG图像，从而减少了项目的体积。
可选地，在本申请实施例提供的SVG图像的处理方法中，在对SVG图像数据进行处理，得到SVG图像的页面元素之后，该方法还包括：通过对SVG图像的页面元素进行样式排版处理，得到排版后的页面元素；根据排版后的页面元素，展示目标页面。
通过设置SVG图像的页面元素的样式排版，并对图形进行渲染，并且用户通过浏览器打开超文本标记语言文件后，可以在展示页面展示出所有SVG格式的图像文件。
通过上述的方案，用户不需要安装任何软件，就可以清晰便捷的查看整个项目中的所有SVG图像。
SVG图像的处理方法的示意图，如图6所示，将项目中的待查看的SVG图像文件夹的路径信息传入到图像处理装置的解析部分中；解析部分收到传入的图像文件夹的路径信息之后，遍历解析各层次的文件夹，查找对应的SVG文件，待全部查找完毕之后，生成一份完整的SVG图像数据文件；处理部分处理生成的SVG图像文件数据，主要负责生成每个SVG图像对应的页面展示元素、处理复制操作以及进行复制路径的拼接；展示部分通过设置一些页面的样式排版等，展示用户友好的UI交互界面。
综上所述，本申请实施例提供的SVG图像的处理方法，通过获取待查看的SVG图像文件夹的目录；遍历目录下的内容，得到遍历的内容；对遍历的内容进行解析，得到SVG图像数据；对SVG图像数据进行处理，得到SVG图像的页面元素；根据页面元素中的样式信息，生成页面元素的超文本标记语言文件，其中，超文本标记语言文件用于查看SVG图像，解决了相关技术中在前端开发过程中查看和引用SVG图像操作繁琐的问题。通过对SVG图像文件夹的目录下的内容进行解析和对SVG图像数据进行处理，得到SVG图像的页面元素，通过增加页面元素的样式信息生成一份超文本标记语言文件，通过生成的超文本标记语言文件即可清晰便捷的查看和引用整个项目中的所有SVG图像，进而达到了提升前端开发的效率。
需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。
本申请实施例还提供了一种SVG图像的处理装置，需要说明的是，本申请实施例的SVG图像的处理装置可以用于执行本申请实施例所提供的用于SVG图像的处理方法。以下对本申请实施例提供的SVG图像的处理装置进行介绍。
图7是根据本申请实施例的SVG图像的处理装置的示意图。如图7所示，该装置包括：第一获取单元701、第一遍历单元702、第一解析单元703、第一处理单元704、第一生成单元705。
具体地，第一获取单元701，用于获取待查看的SVG图像文件夹的目录；
第一遍历单元702，用于遍历目录下的内容，得到遍历的内容；
第一解析单元703，用于对遍历的内容进行解析，得到SVG图像数据；
第一处理单元704，用于对SVG图像数据进行处理，得到SVG图像的页面元素；
第一生成单元705，用于根据页面元素中的样式信息，生成页面元素的超文本标记语言文件，其中，超文本标记语言文件用于查看SVG图像。
综上，本申请实施例提供的SVG图像的处理装置，通过第一获取单元701获取待查看的SVG图像文件夹的目录；第一遍历单元702遍历目录下的内容，得到遍历的内容；第一解析单元703对遍历的内容进行解析，得到SVG图像数据；第一处理单元704对SVG图像数据进行处理，得到SVG图像的页面元素；第一生成单元705根据页面元素中的样式信息，生成页面元素的超文本标记语言文件，其中，超文本标记语言文件用于查看SVG图像，解决了相关技术中在前端开发过程中查看和引用SVG图像操作繁琐的问题。通过对SVG图像文件夹的目录下的内容进行解析和对SVG图像数据进行处理，得到SVG图像的页面元素，通过增加页面元素的样式信息生成一份超文本标记语言文件，通过生成的超文本标记语言文件即可清晰便捷的查看和引用整个项目中的所有SVG图像，进而达到了提升前端开发的效率。
可选地，在本申请实施例提供的SVG图像的处理装置中，第一解析单元包括：第一存储模块，用于若遍历的内容的类型是文件夹，则存储文件夹的信息；第一判断模块，用于若遍历的内容的类型是文件，则判断文件的类型是否是SVG文件；第一过滤模块，用于若文件的类型不是SVG文件，则对文件进行过滤处理；第一处理模块，用于若文件的类型是SVG文件，则将SVG文件与目录相关联，并存储SVG文件的信息。
可选地，在本申请实施例提供的SVG图像的处理装置中，该装置还包括：第二处理单元，用于在对SVG图像数据进行处理，得到SVG图像的页面元素之后，对SVG图像的页面元素进行点击事件的绑定处理，得到绑定后的SVG图像的页面元素，其中，绑定后的SVG图像的页面元素用于对SVG图像的目录和名称信息进行复制操作。
可选地，在本申请实施例提供的SVG图像的处理装置中，该装置还包括：第一打开单元，用于在根据页面元素的样式信息，生成页面元素的超文本标记语言文件之后，通过打开超文本标记语言文件，得到SVG图像的展示页面，其中，SVG图像依据SVG图像文件夹的名称进行分类，在展示页面进行展示；第三处理单元，用于对展示页面中的目标SVG图像进行操作处理，得到目标SVG图像的目录和名称信息，其中，目录和名称信息被存入到剪切板中。
可选地，在本申请实施例提供的SVG图像的处理装置中，该装置还包括：第四处理单元，用于在对SVG图像数据进行处理，得到SVG图像的页面元素之后，通过对SVG图像的页面元素进行样式排版处理，得到排版后的页面元素；第一展示单元，用于根据排版后的页面元素，展示目标页面。
所述SVG图像的处理装置包括处理器和存储器，上述第一获取单元701、第一遍历单元702、第一解析单元703、第一处理单元704、第一生成单元705等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元来实现相应的功能。
处理器中包含内核，由内核去存储器中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数来提升项目的开发效率。
存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)，存储器包括至少一个存储芯片。
本发明实施例提供了一种存储介质，其上存储有程序，该程序被处理器执行时实现所述SVG图像的处理方法。
本发明实施例提供了一种处理器，所述处理器用于运行程序，其中，所述程序运行时执行所述SVG图像的处理方法。
本发明实施例提供了一种设备，设备包括处理器、存储器及存储在存储器上并可在处理器上运行的程序，处理器执行程序时实现以下步骤：获取待查看的SVG图像文件夹的目录；遍历所述目录下的内容，得到遍历的内容；对所述遍历的内容进行解析，得到SVG图像数据；对所述SVG图像数据进行处理，得到SVG图像的页面元素；根据所述页面元素中的样式信息，生成所述页面元素的超文本标记语言文件，其中，所述超文本标记语言文件用于查看所述SVG图像。
处理器执行程序时还实现以下步骤：对所述遍历的内容进行解析，得到SVG图像数据包括：若所述遍历的内容的类型是文件夹，则存储所述文件夹的信息；若所述遍历的内容的类型是文件，则判断所述文件的类型是否是SVG文件；若所述文件的类型不是SVG文件，则对所述文件进行过滤处理；若所述文件的类型是SVG文件，则将所述SVG文件与所述目录相关联，并存储所述SVG文件的信息。
处理器执行程序时还实现以下步骤：在对所述SVG图像数据进行处理，得到SVG图像的页面元素之后，所述方法还包括：对所述SVG图像的页面元素进行点击事件的绑定处理，得到绑定后的SVG图像的页面元素，其中，所述绑定后的SVG图像的页面元素用于对所述SVG图像的目录和名称信息进行复制操作。
处理器执行程序时还实现以下步骤：在根据所述页面元素的样式信息，生成所述页面元素的超文本标记语言文件之后，所述方法还包括：通过打开所述超文本标记语言文件，得到所述SVG图像的展示页面，其中，所述SVG图像依据SVG图像文件夹的名称进行分类，在所述展示页面进行展示；对所述展示页面中的目标SVG图像进行操作处理，得到目标SVG图像的目录和名称信息，其中，所述目录和名称信息被存入到剪切板中。
处理器执行程序时还实现以下步骤：在对所述SVG图像数据进行处理，得到SVG图像的页面元素之后，所述方法还包括：通过对所述SVG图像的页面元素进行样式排版处理，得到排版后的页面元素；根据所述排版后的页面元素，展示目标页面。
本申请还提供了一种计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序：获取待查看的SVG图像文件夹的目录；遍历所述目录下的内容，得到遍历的内容；对所述遍历的内容进行解析，得到SVG图像数据；对所述SVG图像数据进行处理，得到SVG图像的页面元素；根据所述页面元素中的样式信息，生成所述页面元素的超文本标记语言文件，其中，所述超文本标记语言文件用于查看所述SVG图像。
当在数据处理设备上执行时，还适于执行初始化有如下方法步骤的程序：对所述遍历的内容进行解析，得到SVG图像数据包括：若所述遍历的内容的类型是文件夹，则存储所述文件夹的信息；若所述遍历的内容的类型是文件，则判断所述文件的类型是否是SVG文件；若所述文件的类型不是SVG文件，则对所述文件进行过滤处理；若所述文件的类型是SVG文件，则将所述SVG文件与所述目录相关联，并存储所述SVG文件的信息。
当在数据处理设备上执行时，还适于执行初始化有如下方法步骤的程序：在对所述SVG图像数据进行处理，得到SVG图像的页面元素之后，所述方法还包括：对所述SVG图像的页面元素进行点击事件的绑定处理，得到绑定后的SVG图像的页面元素，其中，所述绑定后的SVG图像的页面元素用于对所述SVG图像的目录和名称信息进行复制操作。
当在数据处理设备上执行时，还适于执行初始化有如下方法步骤的程序：在根据所述页面元素的样式信息，生成所述页面元素的超文本标记语言文件之后，所述方法还包括：通过打开所述超文本标记语言文件，得到所述SVG图像的展示页面，其中，所述SVG图像依据SVG图像文件夹的名称进行分类，在所述展示页面进行展示；对所述展示页面中的目标SVG图像进行操作处理，得到目标SVG图像的目录和名称信息，其中，所述目录和名称信息被存入到剪切板中。
当在数据处理设备上执行时，还适于执行初始化有如下方法步骤的程序：在对所述SVG图像数据进行处理，得到SVG图像的页面元素之后，所述方法还包括：通过对所述SVG图像的页面元素进行样式排版处理，得到排版后的页面元素；根据所述排版后的页面元素，展示目标页面。
本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。
存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。存储器是计算机可读介质的示例。
计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。
本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
以上仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。
Claims (10)
1.一种SVG图像的处理方法，其特征在于，包括：
获取待查看的SVG图像文件夹的目录；
遍历所述目录下的内容，得到遍历的内容；
对所述遍历的内容进行解析，得到SVG图像数据；
对所述SVG图像数据进行处理，得到SVG图像的页面元素；
根据所述页面元素中的样式信息，生成所述页面元素的超文本标记语言文件，其中，所述超文本标记语言文件用于查看所述SVG图像。
2.根据权利要求1所述的方法，其特征在于，对所述遍历的内容进行解析，得到SVG图像数据包括：
若所述遍历的内容的类型是文件夹，则存储所述文件夹的信息；
若所述遍历的内容的类型是文件，则判断所述文件的类型是否是SVG文件；
若所述文件的类型不是SVG文件，则对所述文件进行过滤处理；
若所述文件的类型是SVG文件，则将所述SVG文件与所述目录相关联，并存储所述SVG文件的信息。
3.根据权利要求1所述的方法，其特征在于，在对所述SVG图像数据进行处理，得到SVG图像的页面元素之后，所述方法还包括：
对所述SVG图像的页面元素进行点击事件的绑定处理，得到绑定后的SVG图像的页面元素，其中，所述绑定后的SVG图像的页面元素用于对所述SVG图像的目录和名称信息进行复制操作。
4.根据权利要求1所述的方法，其特征在于，在根据所述页面元素的样式信息，生成所述页面元素的超文本标记语言文件之后，所述方法还包括：
通过打开所述超文本标记语言文件，得到所述SVG图像的展示页面，其中，所述SVG图像依据SVG图像文件夹的名称进行分类，在所述展示页面进行展示；
对所述展示页面中的目标SVG图像进行操作处理，得到目标SVG图像的目录和名称信息，其中，所述目录和名称信息被存入到剪切板中。
5.根据权利要求1所述的方法，其特征在于，在对所述SVG图像数据进行处理，得到SVG图像的页面元素之后，所述方法还包括：
通过对所述SVG图像的页面元素进行样式排版处理，得到排版后的页面元素；
根据所述排版后的页面元素，展示目标页面。
6.一种SVG图像的处理装置，其特征在于，包括：
第一获取单元，用于获取待查看的SVG图像文件夹的目录；
第一遍历单元，用于遍历所述目录下的内容，得到遍历的内容；
第一解析单元，用于对所述遍历的内容进行解析，得到SVG图像数据；
第一处理单元，用于对所述SVG图像数据进行处理，得到SVG图像的页面元素；
第一生成单元，用于根据所述页面元素中的样式信息，生成所述页面元素的超文本标记语言文件，其中，所述超文本标记语言文件用于查看所述SVG图像。
7.根据权利要求6所述的装置，其特征在于，所述第一解析单元包括：
第一存储模块，用于若所述遍历的内容的类型是文件夹，则存储所述文件夹的信息；
第一判断模块，用于若所述遍历的内容的类型是文件，则判断所述文件的类型是否是SVG文件；
第一过滤模块，用于若所述文件的类型不是SVG文件，则对所述文件进行过滤处理；
第一处理模块，用于若所述文件的类型是SVG文件，则将所述SVG文件与所述目录相关联，并存储所述SVG文件的信息。
8.根据权利要求6所述的装置，其特征在于，所述装置还包括：
第二处理单元，用于在对所述SVG图像数据进行处理，得到SVG图像的页面元素之后，对所述SVG图像的页面元素进行点击事件的绑定处理，得到绑定后的SVG图像的页面元素，其中，所述绑定后的SVG图像的页面元素用于对所述SVG图像的目录和名称信息进行复制操作。
9.一种存储介质，其特征在于，所述存储介质包括存储的程序，其中，所述程序执行权利要求1至5中任意一项所述的SVG图像的处理方法。
10.一种处理器，其特征在于，所述处理器用于运行程序，其中，所述程序运行时执行权利要求1至5中任意一项所述的SVG图像的处理方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111088415.5A CN113792238A (zh) | 2021-09-16 | 2021-09-16 | Svg图像的处理方法及装置、存储介质和处理器 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111088415.5A CN113792238A (zh) | 2021-09-16 | 2021-09-16 | Svg图像的处理方法及装置、存储介质和处理器 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113792238A true CN113792238A (zh) | 2021-12-14 |
Family
ID=78878699
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111088415.5A Pending CN113792238A (zh) | 2021-09-16 | 2021-09-16 | Svg图像的处理方法及装置、存储介质和处理器 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113792238A (zh) |
Citations (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| EP1260915A1 (en) * | 2001-05-22 | 2002-11-27 | Gateway, Inc. | A method and system for viewing a folder structure of removable storage media |
| WO2003048922A1 (en) * | 2001-12-05 | 2003-06-12 | Canon Kabushiki Kaisha | Directory for multi-page svg document |
| WO2005098659A1 (ja) * | 2004-04-08 | 2005-10-20 | Justsystems Corporation | 文書処理装置及び文書処理方法 |
| CN103049164A (zh) * | 2011-10-14 | 2013-04-17 | 上海可鲁系统软件有限公司 | 一种动态矢量图形快速响应操作的方法及其控制设备 |
| US20150269131A1 (en) * | 2014-03-19 | 2015-09-24 | Kabushiki Kaisha Toshiba | Content conversion apparatus and method, and communication system |
| CN108399172A (zh) * | 2017-02-07 | 2018-08-14 | 阿里巴巴集团控股有限公司 | 一种矢量图的生成方法和装置 |
| JP6429953B1 (ja) * | 2017-06-23 | 2018-11-28 | 鈴木 晃一 | Ｗｅｂブラウザによるダイヤ作成統合システム |
| CN109815327A (zh) * | 2018-12-07 | 2019-05-28 | 南京中新赛克科技有限责任公司 | 一种基于svg的大数据知识图谱可视化解决方案 |
| CN112052416A (zh) * | 2020-08-26 | 2020-12-08 | 腾讯科技（上海）有限公司 | 用于展示图像元素的方法和装置 |
| CN112817590A (zh) * | 2021-01-22 | 2021-05-18 | 京东方科技集团股份有限公司 | 批量生成页面卡片的方法、存储介质及电子设备 |
| CN113096237A (zh) * | 2021-03-31 | 2021-07-09 | 广东电网有限责任公司云浮供电局 | 一种配网设备的全景可视化处理方法及装置 |
-
2021
- 2021-09-16 CN CN202111088415.5A patent/CN113792238A/zh active Pending
Patent Citations (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| EP1260915A1 (en) * | 2001-05-22 | 2002-11-27 | Gateway, Inc. | A method and system for viewing a folder structure of removable storage media |
| WO2003048922A1 (en) * | 2001-12-05 | 2003-06-12 | Canon Kabushiki Kaisha | Directory for multi-page svg document |
| WO2005098659A1 (ja) * | 2004-04-08 | 2005-10-20 | Justsystems Corporation | 文書処理装置及び文書処理方法 |
| CN103049164A (zh) * | 2011-10-14 | 2013-04-17 | 上海可鲁系统软件有限公司 | 一种动态矢量图形快速响应操作的方法及其控制设备 |
| US20150269131A1 (en) * | 2014-03-19 | 2015-09-24 | Kabushiki Kaisha Toshiba | Content conversion apparatus and method, and communication system |
| CN108399172A (zh) * | 2017-02-07 | 2018-08-14 | 阿里巴巴集团控股有限公司 | 一种矢量图的生成方法和装置 |
| JP6429953B1 (ja) * | 2017-06-23 | 2018-11-28 | 鈴木 晃一 | Ｗｅｂブラウザによるダイヤ作成統合システム |
| CN109815327A (zh) * | 2018-12-07 | 2019-05-28 | 南京中新赛克科技有限责任公司 | 一种基于svg的大数据知识图谱可视化解决方案 |
| CN112052416A (zh) * | 2020-08-26 | 2020-12-08 | 腾讯科技（上海）有限公司 | 用于展示图像元素的方法和装置 |
| CN112817590A (zh) * | 2021-01-22 | 2021-05-18 | 京东方科技集团股份有限公司 | 批量生成页面卡片的方法、存储介质及电子设备 |
| CN113096237A (zh) * | 2021-03-31 | 2021-07-09 | 广东电网有限责任公司云浮供电局 | 一种配网设备的全景可视化处理方法及装置 |
Non-Patent Citations (2)
| Title |
|---|
| _大风起兮: "vue 使用require.context显示文件夹下所有的svg-icon图标", pages 1 - 3, Retrieved from the Internet <URL:https://www.jianshu.com/p/55a55362c51c> * |
| PAUL: "How to get img src for image clicked on", pages 1 - 4, Retrieved from the Internet <URL:https://stackoverflow.com/questions/57362416/how-to-get-img-src-for-image-clicked-on> * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11635944B2 (en) | Methods and systems for programmatic creation of an interactive demonstration presentation for an envisioned software product | |
| US10318628B2 (en) | System and method for creation of templates | |
| CN110235122B (zh) | 用于将web内容转化为可重复使用的模板和组件的系统和方法 | |
| US7519573B2 (en) | System and method for clipping, repurposing, and augmenting document content | |
| RU2400816C2 (ru) | Форматы файлов, способы и компьютерные программные продукты для представления презентаций | |
| US7783967B1 (en) | Packaging web content for reuse | |
| US20090019386A1 (en) | Extraction and reapplication of design information to existing websites | |
| US8413070B1 (en) | Declarative resizeable list in electronic form | |
| JP2011159284A (ja) | ウェブサイトフォントのプレビュー | |
| CN106933887B (zh) | 一种数据可视化方法及装置 | |
| CN106886398B (zh) | 一种层叠样式表的提取方法和设备 | |
| US11314757B2 (en) | Search results modulator | |
| Sarkis et al. | A multi-screen refactoring system for video-centric web applications | |
| CN117055987A (zh) | 网页显示方法、装置、电子设备及计算机可读存储介质 | |
| CN115618144B (zh) | 基于网页的动态布局方法、系统、设备及介质 | |
| CN115659087B (zh) | 页面渲染方法、设备及存储介质 | |
| US20120192046A1 (en) | Generation of a source complex document to facilitate content access in complex document creation | |
| CN113792238A (zh) | Svg图像的处理方法及装置、存储介质和处理器 | |
| US20080263070A1 (en) | Common drawing objects | |
| CN110928540A (zh) | 一种页面生成方法及装置 | |
| US20200159805A1 (en) | System and method for producing transferable, modular web pages | |
| CN111104616A (zh) | 一种网页处理方法及其装置 | |
| CN116595284B (zh) | 网页系统运行方法、装置、设备、存储介质和程序 | |
| CN117093386B (zh) | 页面截图方法、装置、计算机设备和存储介质 | |
| CN111367515B (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 |