CN114329024A - 一种iconfont图标搜索方法和系统 - Google Patents

Abstract

本发明公开了一种iconfont图标搜索方法和系统，所述方法包括如下步骤：建立矢量图标的标准图片指纹数据库；获取待检索目标矢量图标的图片，对所述待检索目标矢量图标的图片进行图片预处理；计算预处理后图片的图片指纹，根据计算所得的图片指纹信息和所述标准图片指纹数据库对比；从所述标准图片指纹数据库中提取图片指纹相似度最大的图标为检索目标。所述方法和系统采用图片指纹对比的方式计算检索矢量图标的图片指纹和保存的图标对应的图片指纹相似度，输出最大相似度图片指纹的图标作为最终的目标图标，可以提高检索效率，无需进行文字输入和人工判断。

Description

一种iconfont图标搜索方法和系统

技术领域

本发明涉及图标检索技术领域，特别涉及一种iconfont图标搜索方法和系统。

背景技术

在前端的计算机程序开发过程中，设计师需要将使用的图标上传至iconfont矢量图标库中，前端开发人员根据设计稿在图标库中寻找需要的图标，加入到项目中使用。现有图标的搜索方法主要依靠文字检索和人眼判断，由于iconfont矢量图标库中的图标数量大，命名规则杂乱，前端开发人员寻找图标需要耗费大量的时间。

发明内容

本发明其中一个发明目的在于提供一种iconfont图标搜索方法和系统，所述方法和系统通过构建矢量图标的图片数据，通过图片搜索的方式进行矢量svg图标的匹配，可以提高研发人员的图标检索效率，从而提高前端研发效率。

本发明另一个发明目的在于提供一种iconfont图标搜索方法和系统，所述方法和系统采用图片指纹对比的方式计算检索矢量图标的图片指纹和保存的图标对应的图片指纹相似度，输出最大相似度图片指纹的图标作为最终的目标图标，可以提高检索效率，无需进行文字输入和人工判断。

本发明另一个发明目的在于提供一种iconfont图标搜索方法和系统，所述方法和系统可以将由于截图差异、图片大小或图片相对于原点存在较大偏移量等导致的图片指纹计算差值较大问题进行图片预处理，可以提高图片指纹检索的效率。

为了实现至少一个上述发明目的，本发明进一步提供一种iconfont图标搜索方法，所述方法包括如下步骤：

建立矢量图标的标准图片指纹数据库；

获取待检索目标矢量图标的图片，对所述待检索目标矢量图标的图片进行图片预处理；

计算预处理后图片的图片指纹，根据计算所得的图片指纹信息和所述标准图片指纹数据库对比；

从所述标准图片指纹数据库中提取图片指纹相似度最大的图标为检索目标。

根据本发明其中一个较佳实施例，采用优化的哈希感知算法计算图片指纹，包括如下步骤：将待检索目标矢量图标的图片大小改为36*36像素，并除去图片细节保留纯色部分，计算待检索目标矢量图标的图片每一像素的颜色匹配度，匹配的像素记为1，不匹配的像素记为0，用于构建36*36的二维数组。

根据本发明另一个较佳实施例，从所述标准图片指纹数据库搜索矢量图标的方法包括：

通过选择器选择出所有的svg节点遍历所有svg节点后通过XMLSerializer接口(js内置对象)提供的serializeToString()方法将svg节点序列化为XML字符串，将得到的字符串拼接上“data：image/svg+xml；base64，”得到base64编码，通过所述base64编码传输获取对应的svg图标。

根据本发明另一个较佳实施例，在获取到所述svg图标后，采用canvas绘制对应svg图标的图片，并通过getImageData()方法获取每个图片的像素数据。

根据本发明另一个较佳实施例，在获取所述图片像素数据后，对图片进行灰度化处理：遍历图片的像素数据，并将每个像素的颜色和图标的内容颜色进行对比，若像素颜色和所述图标的内容颜色相同，则该像素记为#FFF(白色)，否则记为#000(黑色)，输出灰度化处理后的图片。

根据本发明另一个较佳实施例，将所述灰度化处理后的图片按照36个像素分组，生成36*36的二元数组，并根据所述二元数组生成对应的图片指纹，其中所述二元数组0表示该像素为黑色，1表示该像素为白色。

根据本发明另一个较佳实施例，根据所述图片指纹计算内容区域的范围，采用canvas的drawImage()方法对所述图片指纹进行放大、裁剪，使得所述图片指纹的内容区域和图片边缘对齐。

根据本发明另一个较佳实施例，在完成对图标图片的预处理后，计算待检索图标图片指纹和所有获取的图标图片指纹对比计算二元数组的元素差异个数，将元素差异个数最小的图标作为检索目标输出。

为了实现至少一个上述发明目的，本发明进一步提供一种iconfont图标搜索系统，所述系统执行所述一种iconfont图标搜索方法。

本发明进一步提供一种计算机可读存储介质，述计算机可读存储介质存储有计算机程序，所述计算机程序可被处理器执行所述一种iconfont图标搜索方法。

附图说明

图1显示的是本发明一种iconfont图标搜索方法流程示意图。

图2显示的是本发明中图标图片进行灰度化处理后的示意图。

图3显示的是本发明中图标图片的图像指纹结构示意图。

图4显示的是本发明中对图标内容进行裁剪放大后图像指纹结构示意图。

图5显示的是本发明对图标内容进行调整后的最终图像指纹结构示意图。

具体实施方式

以下描述用于揭露本发明以使本领域技术人员能够实现本发明。以下描述中的优选实施例只作为举例，本领域技术人员可以想到其他显而易见的变型。在以下描述中界定的本发明的基本原理可以应用于其他实施方案、变形方案、改进方案、等同方案以及没有背离本发明的精神和范围的其他技术方案。

可以理解的是，术语“一”应理解为“至少一”或“一个或多个”，即在一个实施例中，一个元件的数量可以为一个，而在另外的实施例中，该元件的数量可以为多个，术语“一”不能理解为对数量的限制。

请结合图1-图5，本发明提供了一种iconfont图标搜索方法和系统，其中所述方法包括如下步骤：首先需要建立目标图像的截图功能，用于对待检索图标的图像进行截取，其中所述截图功能也可以根据第三方软件进行，比如借助微信截图、钉钉截图等实现对图标的截图功能。进一步需要建立标准图标数据库，通过浏览器插件，在iconfont页面注入js脚本，用于创建一个搜索图标的区域，该搜索图标区域和所述标准图标数据库建立通讯连接，通过截图粘贴到所述搜索图标的区域，用于检索对应的图标，上述检索区域的构建为现有技术，对此本发明不再赘述。

具体而言，本发明对图标的检索方法采用图像匹配方法，其中本发明采用的是优化的感知哈希算法进行图像匹配，其中原感知哈希算法进行图片匹配的方法如下：将截取的图片转化为8*8像素大小的图片，由于像素大幅减少，可以去除图片中的细节，保留图片内容结构；将缩小后的图片转化为灰度图，计算像素的平均灰度；进一步将64个像素的灰度分别和所述平均灰度对比，若大于所述平均灰度，则记该像素为1，否则记该像素为0，用于生成64位的二维数组，其中所述二维数组由0和1组成。

由于图标具有纯色的特殊性，本发明对上述原感知哈希算法进行优化，优化的感知哈希算法包括：获取图标图像颜色内容，截取的图片转化为36*36像素大小的图片，将每个像素和所述图像颜色内容对比，若一致，则将像素记为1，若不同则将该像素记为0，进一步生成36*36的二维数组。其中所述二维数组由0和1构成。需要说明的是，优化的感知哈希算法可以更适应纯色的图标，无需计算灰度均值的方式，大幅减少检索对比的计算量。

由于截图或保存的图标数据存在大小、位置、相对于图片原点的位置差异等，从而使得在计算图标图片指纹时可能存在较大的偏差，因此本发明进一步对图标图片进行预处理，从而可以提高图标检索的成功率。所述图标图片预处理的方法包括如下步骤：获取图标图片数据，将所述图标图片转化为图片指纹后，计算图片内容的区域范围，其中所述图片内容区域范围可以通过所述图标图片指纹对应的二维数组计算，在所述图标图片二维数组中1表示该像素为图片内容区域，因此只要计算图标图片二维数组中的1对应像素组成的图片内容区域和边缘的位置关系，并采用canvas的drawImage()方法对图片进行裁剪、放大等处理方式，使其内容区域与图片边缘对齐，并将处理后的图片根据其新的内容区域生成图标图片更新后的二维数组。本发明需要对待检索的图标和标准图标数据库中的图标进行图片预处理操作，从而使得检索匹配更准确。

值得一提的是，获取标准图标数据库图标的方法包括入下步骤：通过选择器选出所有svg节点，遍历所有选出的svg节点，通过XMLSerializer接口(js内置对象)提供的serializeToString()方法将svg节点序列化为XML字符串，将得到的字符串拼接上“data：image/svg+xml；base64，”得到base64编码。通过所述base64编码可以获取所有对应的图标。需要说明的是，base64编码是一种较长的唯一标识符，可以被放置在URL中。

在获取标准图标数据库中的图标后，进一步采用canvas将图标绘制成36*36像素大小的图片，通过getImageData()方法获得绘制图片每个像素的数据ImageData(描述RGBA的数据，一组范围为0～255的无符号8位整型数据)。进一步将绘制的图像进行灰度化处理，其中所述灰度化处理方法包括：将绘制图片中每个像素数据ImageData和所述内容颜色进行对比，其中内容颜色为图标本身所具有的颜色，若像素数据ImageData和内容颜色一致，则将该像素记为#FFF(白色)，否则记为#000(黑色)，由于图标的纯色特性可以进行上述处理，生成对应图标的灰度图片。进一步根据对应图标的灰度图按照组别分成36*36的图片指纹：其中根据灰度图片的颜色将像素所占的颜色为黑色的像素记录为0，将像素所占的白色的像素记录为1，生成36*36二维数组作为标准图标数据库中对应图标的图片指纹。

根据上述方法分别获取到待检测图标图片指纹和标准图片数据库中图标图片指纹后，将待检测图标图片指纹和所述标准图片数据库中图标图片指纹进行对比，计算指纹相似度，其中所述指纹相似度的计算方法包括：计算待检测图标图片指纹中元素和所述标准图片数据库中图标图片指纹元素的不匹配个数，当不匹配元素个数越少，说明图标的相似度越大，根据不匹配元素个数从小到大依次排序输出，进一步可以根据排序结果选择最相似的图标。

特别地，根据本发明公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分从网络上被下载和安装，和/或从可拆卸介质被安装。在该计算机程序被中央处理单元(CPU)执行时，执行本申请的方法中限定的上述功能。需要说明的是，本申请上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是但不限于电、磁、光、电磁、红外线段、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线段的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本申请中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本申请中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线段、电线段、光缆、RF等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

本领域的技术人员应理解，上述描述及附图中所示的本发明的实施例只作为举例而并不限制本发明，本发明的目的已经完整并有效地实现，本发明的功能及结构原理已在实施例中展示和说明，在没有背离所述原理下，本发明的实施方式可以有任何变形或修改。

Claims (10)

1.一种iconfont图标搜索方法，其特征在于，所述方法包括如下步骤：

建立矢量图标的标准图片指纹数据库；

获取待检索目标矢量图标的图片，对所述待检索目标矢量图标的图片进行图片预处理：

计算预处理后图片的图片指纹，根据计算所得的图片指纹信息和所述标准图片指纹数据库对比；

从所述标准图片指纹数据库中提取图片指纹相似度最大的图标为检索目标。

2.根据权利要求1所述的一种iconfont图标搜索方法，其特征在于，采用优化的哈希感知算法计算图片指纹，包括如下步骤：将待检索目标矢量图标的图片大小改为36*36像素，并除去图片细节保留纯色部分，计算待检索目标矢量图标的图片每一像素的颜色匹配度，匹配的像素记为1，不匹配的像素记为0，用于构建36*36的二维数组。

3.根据权利要求1所述的一种iconfont图标搜索方法，其特征在于，从所述标准图片指纹数据库搜索矢量图标的方法包括：

通过选择器选择出所有的svg节点遍历所有svg节点后通过XMLSerializer接口(js内置对象)提供的serializeToString()方法将svg节点序列化为XML字符串，将得到的字符串拼接上“data：image/svg+xml；base64，”得到base64编码，通过所述base64编码传输获取对应的svg图标。

4.根据权利要求3所述的一种iconfont图标搜索方法，其特征在于，在获取到所述svg图标后，采用canvas绘制对应svg图标的图片，并通过getImageData()方法获取每个图片的像素数据。

5.根据权利要求4所述的一种iconfont图标搜索方法，其特征在于，在获取所述图片像素数据后，对图片进行灰度化处理：遍历图片的像素数据，并将每个像素的颜色和图标的内容颜色进行对比，若像素颜色和所述图标的内容颜色相同，则该像素记为#FFF(白色)，否则记为#000(黑色)，输出灰度化处理后的图片。

6.根据权利要求5所述的一种iconfont图标搜索方法，其特征在于，将所述灰度化处理后的图片按照36个像素分组，生成36*36的二元数组，并根据所述二元数组生成对应的图片指纹，其中所述二元数组0表示该像素为黑色，1表示该像素为白色。

7.根据权利要求1所述的一种iconfont图标搜索方法，其特征在于，根据所述图片指纹计算内容区域的范围，采用canvas的drawImage()方法对所述图片指纹进行放大、裁剪，使得所述图片指纹的内容区域和图片边缘对齐。

8.根据权利要求1所述的一种iconfont图标搜索方法，其特征在于，在完成对图标图片的预处理后，计算待检索图标图片指纹和所有获取的图标图片指纹对比计算二元数组的元素差异个数，将元素差异个数最小的图标作为检索目标输出。

9.一种iconfont图标搜索系统，其特征在于，所述系统执行权利要求1-8中任意一项所述的一种iconfont图标搜索方法。

10.一种计算机可读存储介质，其特征在于，述计算机可读存储介质存储有计算机程序，所述计算机程序可被处理器执行权利要求1-8中任意一项所述的一种iconfont图标搜索方法。

Images