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

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

【技术实现步骤摘要】
一种iconfont图标搜索方法和系统


[0001]本专利技术涉及图标检索
，特别涉及一种iconfont图标搜索方法和系统。

技术介绍

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

技术实现思路

[0003]本专利技术其中一个专利技术目的在于提供一种iconfont图标搜索方法和系统，所述方法和系统通过构建矢量图标的图片数据，通过图片搜索的方式进行矢量svg图标的匹配，可以提高研发人员的图标检索效率，从而提高前端研发效率。
[0004]本专利技术另一个专利技术目的在于提供一种iconfont图标搜索方法和系统，所述方法和系统采用图片指纹对比的方式计算检索矢量图标的图片指纹和保存的图标对应的图片指纹相似度，输出最大相似度图片指纹的图标作为最终的目标图标，可以提高检索效率，无需进行文字输入和人工判断。
[0005]本专利技术另一个专利技术目的在于提供一种iconfont图标搜索方法和系统，所述方法和系统可以将由于截图差异、图片大小或图片相对于原点存在较大偏移量等导致的图片指纹计算差值较大问题进行图片预处理，可以提高图片指纹检索的效率。
[0006]为了实现至少一个上述专利技术目的，本专利技术进一步提供一种iconfont图标搜索方法，所述方法包括如下步骤：
[0007]建立矢量图标的标准图片指纹数据库；
[0008]获取待检索目标矢量图标的图片，对所述待检索目标矢量图标的图片进行图片预处理；
[0009]计算预处理后图片的图片指纹，根据计算所得的图片指纹信息和所述标准图片指纹数据库对比；
[0010]从所述标准图片指纹数据库中提取图片指纹相似度最大的图标为检索目标。
[0011]根据本专利技术其中一个较佳实施例，采用优化的哈希感知算法计算图片指纹，包括如下步骤：将待检索目标矢量图标的图片大小改为36*36像素，并除去图片细节保留纯色部分，计算待检索目标矢量图标的图片每一像素的颜色匹配度，匹配的像素记为1，不匹配的像素记为0，用于构建36*36的二维数组。
[0012]根据本专利技术另一个较佳实施例，从所述标准图片指纹数据库搜索矢量图标的方法包括：
[0013]通过选择器选择出所有的svg节点遍历所有svg节点后通过XMLSerializer接口(js内置对象)提供的serializeToString()方法将svg节点序列化为XML字符串，将得到的
字符串拼接上“data：image/svg+xml；base64，”得到base64编码，通过所述base64编码传输获取对应的svg图标。
[0014]根据本专利技术另一个较佳实施例，在获取到所述svg图标后，采用canvas绘制对应svg图标的图片，并通过getImageData()方法获取每个图片的像素数据。
[0015]根据本专利技术另一个较佳实施例，在获取所述图片像素数据后，对图片进行灰度化处理：遍历图片的像素数据，并将每个像素的颜色和图标的内容颜色进行对比，若像素颜色和所述图标的内容颜色相同，则该像素记为#FFF(白色)，否则记为#000(黑色)，输出灰度化处理后的图片。
[0016]根据本专利技术另一个较佳实施例，将所述灰度化处理后的图片按照36个像素分组，生成36*36的二元数组，并根据所述二元数组生成对应的图片指纹，其中所述二元数组0表示该像素为黑色，1表示该像素为白色。
[0017]根据本专利技术另一个较佳实施例，根据所述图片指纹计算内容区域的范围，采用canvas的drawImage()方法对所述图片指纹进行放大、裁剪，使得所述图片指纹的内容区域和图片边缘对齐。
[0018]根据本专利技术另一个较佳实施例，在完成对图标图片的预处理后，计算待检索图标图片指纹和所有获取的图标图片指纹对比计算二元数组的元素差异个数，将元素差异个数最小的图标作为检索目标输出。
[0019]为了实现至少一个上述专利技术目的，本专利技术进一步提供一种iconfont图标搜索系统，所述系统执行所述一种iconfont图标搜索方法。
[0020]本专利技术进一步提供一种计算机可读存储介质，述计算机可读存储介质存储有计算机程序，所述计算机程序可被处理器执行所述一种iconfont图标搜索方法。
附图说明
[0021]图1显示的是本专利技术一种iconfont图标搜索方法流程示意图。
[0022]图2显示的是本专利技术中图标图片进行灰度化处理后的示意图。
[0023]图3显示的是本专利技术中图标图片的图像指纹结构示意图。
[0024]图4显示的是本专利技术中对图标内容进行裁剪放大后图像指纹结构示意图。
[0025]图5显示的是本专利技术对图标内容进行调整后的最终图像指纹结构示意图。
具体实施方式
[0026]以下描述用于揭露本专利技术以使本领域技术人员能够实现本专利技术。以下描述中的优选实施例只作为举例，本领域技术人员可以想到其他显而易见的变型。在以下描述中界定的本专利技术的基本原理可以应用于其他实施方案、变形方案、改进方案、等同方案以及没有背离本专利技术的精神和范围的其他技术方案。
[0027]可以理解的是，术语“一”应理解为“至少一”或“一个或多个”，即在一个实施例中，一个元件的数量可以为一个，而在另外的实施例中，该元件的数量可以为多个，术语“一”不能理解为对数量的限制。
[0028]请结合图1
‑
图5，本专利技术提供了一种iconfont图标搜索方法和系统，其中所述方法包括如下步骤：首先需要建立目标图像的截图功能，用于对待检索图标的图像进行截取，其
中所述截图功能也可以根据第三方软件进行，比如借助微信截图、钉钉截图等实现对图标的截图功能。进一步需要建立标准图标数据库，通过浏览器插件，在iconfont页面注入js脚本，用于创建一个搜索图标的区域，该搜索图标区域和所述标准图标数据库建立通讯连接，通过截图粘贴到所述搜索图标的区域，用于检索对应的图标，上述检索区域的构建为现有技术，对此本专利技术不再赘述。
[0029]具体而言，本专利技术对图标的检索方法采用图像匹配方法，其中本专利技术采用的是优化的感知哈希算法进行图像匹配，其中原感知哈希算法进行图片匹配的方法如下：将截取的图片转化为8*8像素大小的图片，由于像素大幅减少，可以去除图片中的细节，保留图片内容结构；将缩小后的图片转化为灰度图，计算像素的平均灰度；进一步将64个像素的灰度分别和所述平均灰度对比，若大于所述平均灰度，则记该像素为1，否则记该像素为0，用于生成64位的二维数组，其中所述二维数组由0和1组成。
[0030]由于图标具有纯色的特殊性，本专利技术对上述原感知哈希算法进行优化，优化的感知哈希算法包括：获取图标图像颜色内容，截取的图片转化为本文档来自技高网...

【技术保护点】

【技术特征摘要】
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所...

【专利技术属性】
技术研发人员：方宇驰，王森元，孙勤，魏美钟，
申请(专利权)人：杭州每刻科技有限公司，
类型：发明
国别省市：