CN113377453A - 图片处理方法、装置与电子设备 - Google Patents

Abstract

本公开提供一种图片处理方法、装置与电子设备。图片处理方法包括：对目标图片进行预处理以生成目标矢量图片；根据预设配置参数删除或修改所述目标矢量图片中的信息；根据所述目标矢量图片生成字体文件，以使网页通过加载所述字体文件引用所述目标矢量图片。本公开实施例可以自动生成便于网页加载的图片，提高网页图片的加载速度和显示质量。

Description

图片处理方法、装置与电子设备

技术领域

本公开涉及网页技术领域，具体而言，涉及一种用于网页的图片处理方法、装置与电子设备。

背景技术

网页加载图片时一般直接根据网页代码中记录的图片地址查找图片文件并加载。由于非矢量图形在改变显示尺寸时会导致图片模糊，网页通常使用数据量较大的矢量图片，当网页中包含图片较多时，会极大影响网页加载速度。同时，网页中每个图标均对应一个图片文件，在网页中的图标较多时，大量图标的加载也会给网页加载速度带来挑战。此外，制作网页图标时通常需要人工将目标图片制作成符合图标要求的图片文件，这一过程也给网页开发带来较大的时间成本和人力成本。

需要说明的是，在上述背景技术部分公开的信息仅用于加强对本公开的背景的理解，因此可以包括不构成对本领域普通技术人员已知的现有技术的信息。

发明内容

本公开的目的在于提供一种图片处理方法、装置与电子设备，用于至少在一定程度上克服由于相关技术的限制和缺陷而导致的网页图片加载效率低、网页图标制作和加载效率低的问题。

根据本公开实施例的第一方面，提供一种图片处理方法，包括：对目标图片进行预处理以生成目标矢量图片；根据预设配置参数删除或修改所述目标矢量图片中的信息；根据所述目标矢量图片生成字体文件，以使网页通过加载所述字体文件引用所述目标矢量图片。

在本公开的一种示例性实施例中，所述对目标图片进行预处理以生成目标矢量图片包括：将所述目标图片转化为Base64字符后，将所述Base64字符转化为矢量图片，以得到所述目标矢量图片。

在本公开的一种示例性实施例中，所述根据预设配置参数删除或修改所述目标矢量图片中的信息包括：获取与所述目标图片对应的配置文件，所述配置文件中包含所述预设配置参数，所述预设配置参数至少包括删除项和转换项；根据所述删除项删除所述目标矢量图片中的信息，所述信息至少包括文件类型标记、文件格式信息、背景色、空字符、隐藏信息等；根据所述转换项对所述目标矢量图片进行以下处理中的至少一种：修改文件名、颜色翻转、调整对比度、调整亮度、调整图片形状、调整图片尺寸、调整图片存储量大小。

在本公开的一种示例性实施例中，所述字体文件包括预设矢量图片，所述根据所述目标矢量图片生成字体文件包括：将所述目标矢量图片添加到预设矢量图片，以使网页在加载所述预设矢量图片后，通过symbol标签引用所述目标矢量图片的文件名来引用所述目标矢量图片。

在本公开的一种示例性实施例中，所述字体文件包括字体样式文件，所述根据所述目标矢量图片生成字体文件包括：根据所述目标矢量图片生成预设格式的字体样式文件，并在所述字体样式文件中生成所述目标矢量图片的文件名，以使网页在加载所述字体样式文件后，通过class标签引用所述目标矢量图片的文件名来引用所述目标矢量图片。

在本公开的一种示例性实施例中，所述字体文件包括字体样式文件，所述根据所述目标矢量图片生成字体文件包括：根据所述目标矢量图片生成预设格式的字体样式文件，并在所述字体样式文件中生成所述目标矢量图片的统一码，以使网页在加载所述字体样式文件后，通过引用所述目标矢量图片的统一码来引用所述目标矢量图片。

在本公开的一种示例性实施例中，所述目标图片包括图标图片。

根据本公开实施例的第二方面，提供一种图片处理装置，包括：矢量图片转换模块，设置为对目标图片进行预处理以生成目标矢量图片；图片信息修改模块，设置为根据预设配置参数删除或修改所述目标矢量图片中的信息；字体文件生成模块，设置为根据所述目标矢量图片生成字体文件，以使网页通过加载所述字体文件引用所述目标矢量图片。

根据本公开的第三方面，提供一种电子设备，包括：存储器；以及耦合到所述存储器的处理器，所述处理器被配置为基于存储在所述存储器中的指令，执行如上述任意一项所述的方法。

根据本公开的第四方面，提供一种计算机可读存储介质，其上存储有程序，该程序被处理器执行时实现如上述任意一项所述的图片处理方法。

本公开实施例通过自动将目标图片转换成矢量图片，并自动对矢量图片进行处理，能够提高网页图片的质量和生成效率，提高后续网页图片的加载速度和显示效果；此外，由于自动根据与目标图片对应的目标矢量图片生成字体文件，可以在网页加载过程中通过引用字体文件实现图片加载，使网页加载图片的速度与加载文字的速度相近，克服相关技术中网页图片较多时，网页加载速度慢的问题，有效提高网页加载效率。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。显而易见地，下面描述中的附图仅仅是本公开的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本公开示例性实施例中图片处理方法的流程图。

图2是本公开一个实施例中步骤S2的子流程图。

图3是本公开一个实施例中图片处理方法的整体流程图。

图4是本公开示例性实施例中一种图片处理装置的方框图。

图5是本公开示例性实施例中一种电子设备的方框图。

具体实施方式

现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本公开将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施方式中。在下面的描述中，提供许多具体细节从而给出对本公开的实施方式的充分理解。然而，本领域技术人员将意识到，可以实践本公开的技术方案而省略所述特定细节中的一个或更多，或者可以采用其它的方法、组元、装置、步骤等。在其它情况下，不详细示出或描述公知技术方案以避免喧宾夺主而使得本公开的各方面变得模糊。

此外，附图仅为本公开的示意性图解，图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。附图中所示的一些方框图是功能实体，不一定必须与物理或逻辑上独立的实体相对应。可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

下面结合附图对本公开示例实施方式进行详细说明。

图1是本公开示例性实施例中图片处理方法的流程图。

参考图1，图片处理方法100可以包括：

步骤S1，对目标图片进行预处理以生成目标矢量图片；

步骤S2，根据预设配置参数删除或修改所述目标矢量图片中的信息；

步骤S3，根据所述目标矢量图片生成字体文件，以使网页通过加载所述字体文件引用所述目标矢量图片。

本公开实施例通过自动将目标图片转换成矢量图片，并自动对矢量图片进行处理，能够提高网页图片的质量和生成效率，提高后续网页图片的加载速度和显示效果；此外，由于自动根据与目标图片对应的目标矢量图片生成字体文件，可以在网页加载过程中通过引用字体文件实现图片加载，使网页加载图片的速度与加载文字的速度相近，克服相关技术中网页图片较多时，网页加载速度慢的问题，有效提高网页加载效率。

下面，对图片处理方法100的各步骤进行详细说明。

在步骤S1，对目标图片进行预处理以生成目标矢量图片。

在本公开实施例中，目标图片例如可以为由设计人员提供的图标图片，或者网页中加载的其他用途的图片(例如新闻图片或广告图片)。图片提供者可以将待处理的多张目标图片整体打包到一个文件夹中，这些目标图片的格式可以为矢量图片，也可以为其他格式的图片，目标图片的格式可以相同也可以不同，本公开技术方案无需对目标图片的格式进行限制。对目标图片进行预处理时，可以并行批量处理多张目标图片，也可以顺次处理每张目标图片，本领域技术人员可以根据硬件性能和计算资源情况确定目标图片的处理策略。以下实施例以每次处理一张目标图片为例，但是也可以被应用到批量处理多张目标图片的过程中。

当将全部待处理的目标图片存入一个图片文件夹中时，可以通过Nodejs的文件模块(官方提供的文件系统接口(FILE SYSTEM API))读取该图片文件夹，检测文件夹中的目标图片是否为矢量图片，如果是矢量图片，则暂停对该矢量图片进行处理，或者将该矢量图片存放到用于保存目标矢量图片的文件夹；如果目标图片不是矢量图片，则对目标图片进行处理以生成目标矢量图片。其中，NodeJs是一个基于Chrome V8引擎的JavaScript运行环境，JavaScript是一种具有函数优先的轻量级解释型或即时编译的编程语言。

矢量图片又称可缩放矢量图形(Scalable Vector Graphics，SVG)，被放大时不会模糊，具有良好的显示效果，因此本公开实施例将全部目标图片均处理成矢量图片。具体方式例如可以为将所述目标图片转化为Base64字符后，将所述Base64字符转化为矢量图片，以得到所述目标矢量图片。其中Base64是一种基于64个可打印字符来表示二进制数据的方法。在一个实施例中，可以使用JavaScript Canvas API将图片转化为Base64字符，然后使用“canvas.toDataURL”方法将Base64字符串转化为SVG文件，即可得到与目标图片对应的目标矢量图片。在其他实施例中，还可以有其他处理方式，本公开对此不作特殊限制。

当批量处理多张目标图片时，可以将目标矢量图片均存放在临时文件夹中，例如temp文件夹(该文件夹存放在计算机内存中，不可见)，以便在后续流程中批量处理矢量图片。

在步骤S2，根据预设配置参数删除或修改所述目标矢量图片中的信息。

图2是本公开一个实施例中步骤S2的子流程图。

参考图2，在一个实施例中，步骤S2可以包括：

步骤S21，获取与所述目标图片对应的配置文件，所述配置文件中包含所述预设配置参数，所述预设配置参数至少包括删除项和转换项；

步骤S22，根据所述删除项删除所述目标矢量图片中的信息，所述信息至少包括文件类型标记、文件格式信息、背景色、空字符、隐藏信息等；

步骤S23，根据所述转换项对所述目标矢量图片进行以下处理中的至少一种：修改文件名、颜色翻转、调整对比度、调整亮度、调整图片形状、调整图片尺寸、调整图片存储量大小。

可以基于通常的图片处理需求生成配置文件，或者基于当前批次的目标图片的处理需求生成配置文件。配置文件中可以记录用于进行图片处理的预设配置参数，预设配置参数例如可以包括删除项和转换项，其中删除项用于设置删除目标矢量图片中的何种信息，转换项可以用于设置对目标矢量图片进行何种转换。

在一些实施例中，删除项例如可以包括文件类型标记、文件格式信息、背景色、空字符、隐藏信息等行内样式信息和文件声明信息，转换项例如可以包括修改文件名、颜色翻转、调整对比度、调整亮度、调整图片形状、调整图片尺寸、调整图片存储量大小等操作的至少一种。其中，上述每一项预设配置参数均可以使用二值法设置是否对当前图像进行本项调整。例如，可以设置多项预设配置参数，每项预设配置参数均可以被设置为“使能”和“禁止”两种状态(通过“0”或“1”实现，或者通过“true”或“false”实现)，从而使开发人员可以通过调整每项预设配置参数的属性值来调整当前目标矢量图片的处理策略。

以下是一个实施例中配置文件中的配置文件参数的设置示意：

SvgCompiler：{

‘removeDoctype’:true,

‘removeXMLProcInst’:true,

‘removeComments’:true,

‘removeMetadata’:true,

‘removeEditorsNSData’:true,

‘cleanupAttr’:true,

‘cleanupIDs’:true,

‘removeUselessDefs’:true,

‘removeUselessStrokeAndFill’:true,

‘removeViewBox’:true,

‘removeHiddenElems’:true,

‘removeEmptyText’:true,

‘removeEmptyAttrs’:true,

‘removeEmptyContainers’:true,

‘removeTitle’:true,

‘removeDesc’:true,

‘removeUnusedNS’:true

}

其中，removeDoctype是指删除文档声明，removeXMLProcInst是指删除XML处理指令；removeComments是指删除注释；removeMetadata是指删除元数据的源信息；removeEditorsNSData是指删除编辑器的命名空间、元素和属性；cleanupAttr是指删除换行符、结束符以及重复空格；cleanupIDs是指删除没有使用或压缩使用的识别符；removeUselessDefs是指删除没有ID的Defs元素(用于定义需要再次使用的引用元素)；removeUselessStrokeAndFill是指删除无用的stroke(用于绘制路径)和fill(用于填充路径)属性；removeViewBox是指删除ViewBox属性(如果可以，默认进行)；removeHiddenElems是指删除隐藏元素；removeEmptyText是指删除隐藏文本元素；removeEmptyAttrs是指删除空属性；removeEmptyContainers是指删除空的容器元素；removeTitle是指删除标题(默认禁用)；removeDesc是指删除desc描述(默认只有desc元素无意义的时候)；removeUnusedNS是指删除没有使用的命名空间声明。以上删除项仅为示例，本领域技术人员可以根据实际应用自行设置。

在另一些实施例中，也可以在配置文件中生成添加项，添加项用于设置对目标矢量图片添加何种信息(例如添加水印、日期、商标等)。预设配置参数的设置是为了实现对目标矢量图片的自动处理，提高目标矢量图片的处理效率，预设配置参数的设置形式和存储方式可以由本领域技术人员自行设置。

由于对目标矢量图片进行自动处理，可以批量生成符合网页加载要求的矢量图片，提高图片处理效率和图片显示质量。

处理后的目标矢量图片可以被存放在同一个文件夹中(例如“../src/icon”)，以便后续处理流程基于该文件夹中的目标矢量图片生成字体文件。

在步骤S3，根据所述目标矢量图片生成字体文件，以使网页通过加载所述字体文件引用所述目标矢量图片。

在本公开实施例中，将目标矢量图片自动处理成字体文件，进而可以使网页开发者使用与引用字体相同的方式实现对图片的引用，从而使网页在加载图片时具有与加载字体相近的数据运算量和加载速度，极大提高网页加载图片的效率。由于生成的字体文件中的图片均为经过预处理的矢量图片，当图片被网页的不同功能区加载、图片尺寸不同时，也能保持较高的显示质量。

开发人员可通过配置将该字体文件添加到对应的编程语言文件中，例如web前端开发工程师可通过生成的字体文件以层叠样式表的形式引入项目中，通过样式名显示对应的目标矢量图片。

可以基于当前的文件系统类型(Android/IOS/Web)确定字体文件的生成方式以及字体文件的文件类型。下面以Web系统为例，介绍本公开用于生成字体文件的几个实施例。

在一个实施例中，可以将目标矢量图片添加到预设矢量图片，以使网页在加载预设矢量图片后，通过symbol标签引用目标矢量图片的文件名来引用目标矢量图片。

预设矢量图片中可以包含多个目标数量图片。当文件系统为Web系统时，预设矢量图片的类型例如可以为JavaScript文件(JS文件)。网页开发人员可以通过通常设置JS文件加载的方式设置网页加载该预设数量图片。预设矢量图片中的每个目标矢量图片均可以具有单独的命名(与字体名称的设置方式一致)，网页开发人员可以在网页中通过设置symbol标签引用的方式来引用预设矢量图片中已处理好的目标矢量图片。

在另一个实施例中，还可以根据目标矢量图片生成预设格式的字体样式文件，并在字体样式文件中生成目标矢量图片的文件名，以使网页在加载字体样式文件后，通过class标签引用目标矢量图片的文件名来引用目标矢量图片。字体样式文件的格式例如可以为TTF(True Type Font，真类字体)、EOT(Embedded Open Type，嵌入开放类型)、WOFF(Web Open Font Format，网络开放字体格式)、WOFF2(Web Open Font Format 2.0，网络开放字体格式第二版)、CSS(Cascading Style Sheets，层叠样式表)文件等。其中，CSS是一种用来表现HTML(Hyper Text Markup Language，超文本标记语言，标准通用标记语言的一个应用)或XML(Extensible Markup Language，可拓展标记语言，标准通用标记语言的一个子集)等文件样式的计算机语言。

可以根据经过预处理的多个目标矢量图片生成一个字体样式文件，在该字体样式文件中，目标矢量图片的文件名例如可以通过字母或其他容易阅读的标识符来实现。网页开发人员可以在加载该字体文件后，通过使用class标记与目标矢量图片的文件名，实现对目标矢量图片的引用。由于文件名易于识别和修改，这种方式在提高图片加载效率的同时，对开发者的开发效率较有优势。

在再一个实施例中，还可以根据目标矢量图片生成预设格式的字体样式文件，并在字体样式文件中生成目标矢量图片的统一码，以使网页在加载字体样式文件后，通过引用目标矢量图片的统一码来引用目标矢量图片。

在网页中引用目标矢量图片时，可以定义@font-face，引入字体文件(ttf/eot/woff/woff2)，直接引用目标表矢量图片的Unicode编码即可。其中@font-face是一个CSS规则，允许使用自定义字体。

统一码(Unicode)是一种在计算机上使用的字符编码，也称为万国码或单一码，学名是Universal Multiple-Octet Coded Character Set，UCS。它为每种语言中的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求。例如，“汉字”对应的Unicode是0x6c49和0x5b57。通过在网页编辑中使用统一码来引用该目标矢量图片，可以提高目标矢量图片的加载速度，对计算效率较有优势。在开发过程中，可以使用同一码的不同版本实现目标矢量图片的引用，例如UCS-2(两个字节编码)、UCS-4(四个字节编码)等，本公开不以此为限。

本公开实施例的方法可以应用于网页图标(icon)的生成，网页图标包括但不限于各类控件(例如按钮)和标识(例如指示图像)。当网页图标较多时，通过本公开实施例提供的方法可以大批量高效率制作高质量的网页图标文件，并通过简单的引用方式添加到网页中，从而提高网页加载图标文件的效率。

图3是本公开一个实施例中图片处理方法的整体流程图。

参考图3，在一个实施例中，可以预先将待处理的目标图片存入预设文件夹，此时整体的图片处理流程可以包括：

步骤S31，获取预设文件夹中的目标图片；

步骤S32，判断当前目标图片是否为矢量图片，如果是，进入步骤S33将非矢量图片转换为矢量图片后进入步骤S34，如果否，直接进入步骤S34；

步骤S34，读取配置文件。其中配置文件可以包括矢量图片的相关配置项，例如冗余代码、颜色等；字体图标相关的配置项，例如文件名称、文件名前缀、字体大小等；系统输出类型，例如Web/Android/IOS等；以及输出目录路径等信息。

步骤S35，自动根据配置文件对矢量图片进行优化处理。其中优化方法例如可以包括调整图片大小、着色、删除冗余代码等。

步骤S36，根据优化完成的多个矢量图片生成字体文件。字体文件中包含多个图标文件，每个图标文件均为矢量图片形式。

本公开实施例通过直接将不同格式的图片转成矢量图片，并通过配置输出不同系统生成字体文件以方便开发人员使用，可以极大提高图标文件的制作效率和网页加载图标文件时的加载效率。应用本公开实施例提供的方法，旧项目中的图标文件也可以无障碍进行迭代——在旧项目中迁移旧的图片文件到本公开实施例用于收集目标图片的预设文件夹，后自动对这些图片文件进行上述处理，然后在网页中使用图标的地方更换为新的引用方式，以实现对旧项目的迭代。相比于相关技术中存在的图标图片(矢量图形)存在兼容性问题(不兼容IE6-8和Android 2.3)，本申请将设计人员提供的图片制作成字体文件，在项目中采用该字体文件替代图片，既解决了兼容性问题，也提升了图标设置的灵活性，最终提高网页开发效率和网页加载效率。

对应于上述方法实施例，本公开还提供一种图片处理装置，可以用于执行上述方法实施例。

图4是本公开示例性实施例中一种图片处理装置的方框图。

参考图4，图片处理装置400可以包括：

矢量图片转换模块41，设置为对目标图片进行预处理以生成目标矢量图片；

图片信息修改模块42，设置为根据预设配置参数删除或修改所述目标矢量图片中的信息；

字体文件生成模块43，设置为根据所述目标矢量图片生成字体文件，以使网页通过加载所述字体文件引用所述目标矢量图片。

在本公开的一种示例性实施例中，矢量图片转换模块41设置为：将所述目标图片转化为Base64字符后，将所述Base64字符转化为矢量图片，以得到所述目标矢量图片。

在本公开的一种示例性实施例中，图片信息修改模块42设置为：获取与所述目标图片对应的配置文件，所述配置文件中包含所述预设配置参数，所述预设配置参数至少包括删除项和转换项；根据所述删除项删除所述目标矢量图片中的信息，所述信息至少包括文件类型标记、文件格式信息、背景色、空字符、隐藏信息等；根据所述转换项对所述目标矢量图片进行以下处理中的至少一种：修改文件名、颜色翻转、调整对比度、调整亮度、调整图片形状、调整图片尺寸、调整图片存储量大小。

在本公开的一种示例性实施例中，字体文件生成模块43设置为：将所述目标矢量图片添加到预设矢量图片，以使网页在加载所述预设矢量图片后，通过symbol标签引用所述目标矢量图片的文件名来引用所述目标矢量图片。

在本公开的一种示例性实施例中，字体文件生成模块43设置为：根据所述目标矢量图片生成预设格式的字体样式文件，并在所述字体样式文件中生成所述目标矢量图片的文件名，以使网页在加载所述字体样式文件后，通过class标签引用所述目标矢量图片的文件名来引用所述目标矢量图片。

在本公开的一种示例性实施例中，字体文件生成模块43设置为：根据所述目标矢量图片生成预设格式的字体样式文件，并在所述字体样式文件中生成所述目标矢量图片的统一码，以使网页在加载所述字体样式文件后，通过引用所述目标矢量图片的统一码来引用所述目标矢量图片。

在本公开的一种示例性实施例中，所述目标图片包括图标图片。

由于装置400的各功能已在其对应的方法实施例中予以详细说明，本公开于此不再赘述。

应当注意，尽管在上文详细描述中提及了用于动作执行的设备的若干模块或者单元，但是这种划分并非强制性的。实际上，根据本公开的实施方式，上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。

在本公开的示例性实施例中，还提供了一种能够实现上述方法的电子设备。

所属技术领域的技术人员能够理解，本发明的各个方面可以实现为系统、方法或程序产品。因此，本发明的各个方面可以具体实现为以下形式，即：完全的硬件实施方式、完全的软件实施方式(包括固件、微代码等)，或硬件和软件方面结合的实施方式，这里可以统称为“电路”、“模块”或“系统”。

下面参照图5来描述根据本发明的这种实施方式的电子设备500。图5显示的电子设备500仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图5所示，电子设备500以通用计算设备的形式表现。电子设备500的组件可以包括但不限于：上述至少一个处理单元510、上述至少一个存储单元520、连接不同系统组件(包括存储单元520和处理单元510)的总线530。

其中，所述存储单元存储有程序代码，所述程序代码可以被所述处理单元510执行，使得所述处理单元510执行本说明书上述“示例性方法”部分中描述的根据本发明各种示例性实施方式的步骤。例如，所述处理单元510可以执行如本公开实施例所示的方法。

存储单元520可以包括易失性存储单元形式的可读介质，例如随机存取存储单元(RAM)5201和/或高速缓存存储单元5202，还可以进一步包括只读存储单元(ROM)5203。

存储单元520还可以包括具有一组(至少一个)程序模块5205的程序/实用工具5204，这样的程序模块5205包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

总线530可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、外围总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。

电子设备500也可以与一个或多个外部设备600(例如键盘、指向设备、蓝牙设备等)通信，还可与一个或者多个使得用户能与该电子设备500交互的设备通信，和/或与使得该电子设备500能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口550进行。并且，电子设备500还可以通过网络适配器560与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器560通过总线530与电子设备500的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备500使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

通过以上的实施方式的描述，本领域的技术人员易于理解，这里描述的示例实施方式可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本公开实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、终端装置、或者网络设备等)执行根据本公开实施方式的方法。

在本公开的示例性实施例中，还提供了一种计算机可读存储介质，其上存储有能够实现本说明书上述方法的程序产品。在一些可能的实施方式中，本发明的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当所述程序产品在终端设备上运行时，所述程序代码用于使所述终端设备执行本说明书上述“示例性方法”部分中描述的根据本发明各种示例性实施方式的步骤。

根据本发明的实施方式的用于实现上述方法的程序产品可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序代码，并可以在终端设备，例如个人电脑上运行。然而，本发明的程序产品不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

所述程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以为但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读信号介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言的任意组合来编写用于执行本发明操作的程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。

此外，上述附图仅是根据本发明示例性实施例的方法所包括的处理的示意性说明，而不是限制目的。易于理解，上述附图所示的处理并不表明或限制这些处理的时间顺序。另外，也易于理解，这些处理可以是例如在多个模块中同步或异步执行的。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和构思由权利要求指出。

Claims (10)

1.一种图片处理方法，其特征在于，包括：

对目标图片进行预处理以生成目标矢量图片；

根据预设配置参数删除或修改所述目标矢量图片中的信息；

根据所述目标矢量图片生成字体文件，以使网页通过加载所述字体文件引用所述目标矢量图片。

2.如权利要求1所述的图片处理方法，其特征在于，所述对目标图片进行预处理以生成目标矢量图片包括：

将所述目标图片转化为Base64字符后，将所述Base64字符转化为矢量图片，以得到所述目标矢量图片。

3.如权利要求1所述的图片处理方法，其特征在于，所述根据预设配置参数删除或修改所述目标矢量图片中的信息包括：

获取与所述目标图片对应的配置文件，所述配置文件中包含所述预设配置参数，所述预设配置参数至少包括删除项和转换项；

根据所述删除项删除所述目标矢量图片中的信息，所述信息至少包括文件类型标记、文件格式信息、背景色、空字符、隐藏信息等；

根据所述转换项对所述目标矢量图片进行以下处理中的至少一种：修改文件名、颜色翻转、调整对比度、调整亮度、调整图片形状、调整图片尺寸、调整图片存储量大小。

4.如权利要求1所述的图片处理方法，其特征在于，所述字体文件包括预设矢量图片，所述根据所述目标矢量图片生成字体文件包括：

将所述目标矢量图片添加到预设矢量图片，以使网页在加载所述预设矢量图片后，通过symbol标签引用所述目标矢量图片的文件名来引用所述目标矢量图片。

5.如权利要求1所述的图片处理方法，其特征在于，所述字体文件包括字体样式文件，所述根据所述目标矢量图片生成字体文件包括：

根据所述目标矢量图片生成预设格式的字体样式文件，并在所述字体样式文件中生成所述目标矢量图片的文件名，以使网页在加载所述字体样式文件后，通过class标签引用所述目标矢量图片的文件名来引用所述目标矢量图片。

6.如权利要求1所述的图片处理方法，其特征在于，所述字体文件包括字体样式文件，所述根据所述目标矢量图片生成字体文件包括：

根据所述目标矢量图片生成预设格式的字体样式文件，并在所述字体样式文件中生成所述目标矢量图片的统一码，以使网页在加载所述字体样式文件后，通过引用所述目标矢量图片的统一码来引用所述目标矢量图片。

7.如权利要求1所述的图片处理方法，其特征在于，所述目标图片包括图标图片。

8.一种图片处理装置，其特征在于，包括：

矢量图片转换模块，设置为对目标图片进行预处理以生成目标矢量图片；

图片信息修改模块，设置为根据预设配置参数删除或修改所述目标矢量图片中的信息；

字体文件生成模块，设置为根据所述目标矢量图片生成字体文件，以使网页通过加载所述字体文件引用所述目标矢量图片。

9.一种电子设备，其特征在于，包括：

存储器；以及

耦合到所述存储器的处理器，所述处理器被配置为基于存储在所述存储器中的指令，执行如权利要求1-7任一项所述的图片处理方法。

10.一种计算机可读存储介质，其上存储有程序，该程序被处理器执行时实现如权利要求1-7任一项所述的图片处理方法。

Images