【以图搜图】写了个工具用来查找前端项目中已存在的图片

191 阅读3分钟

在做前端项目时,往往需要导入图片资源,有些常用图标在以前可能就导入过,但很难记起导入到哪个文件夹以及图标名称是什么。通过这个工具,可以帮你快速检索出已有资源

Icon Finder

🌐 在线访问: iconfinder.vercel.app

一个基于图像相似度搜索的图标/图片查找工具,支持形状、颜色的智能匹配,可以帮助你在大量图片中快速找到相似的图片。

好用的话可以给github仓库点个star噢 Github: github.com/hofens/icon…

主要功能

在这里插入图片描述

1. 图片搜索

  • 支持拖拽或选择图片文件进行搜索
  • 基于颜色和形状的相似度计算
  • 实时预览搜索结果
  • 可调节相似度阈值进行结果筛选
  • 支持按目录筛选搜索结果
  • 支持主流图片格式:JPG、JPEG、PNG、GIF、BMP、WebP、SVG

2. 目录管理

  • 浏览并选择要搜索的目录
  • 自动扫描目录中的所有图片文件
  • 支持包含/排除路径的正则表达式过滤
  • 缓存目录结构,提高后续搜索速度

3. 图片缓存

  • 自动缓存图片特征,加快搜索速度
  • 支持重建缓存功能
  • 显示缓存构建进度
  • 智能检测缓存状态,避免重复处理

4. 结果展示

  • 网格式展示搜索结果
  • 显示图片预览、文件名和相似度
  • 支持查看详细的图片信息(尺寸、大小等)
  • 可选显示颜色相似度和形状相似度详情
  • 支持图片预览放大查看

5. 其他特性

  • 支持中英文界面切换
  • 自动保存用户设置和偏好
  • 支持深色/浅色主题(跟随系统)
  • 文件拖放操作支持
  • 双击复制文件名功能

使用方法

  1. 选择目录

    • 点击"浏览"按钮选择要搜索的图片目录
    • 首次选择目录时会自动构建图片特征缓存
    • 可以在设置中配置目录过滤规则
  2. 搜索图片

    • 将图片拖入上传区域,或点击"选择文件"
    • 等待搜索完成,结果会按相似度排序显示
    • 使用相似度滑块调整匹配精度
    • 使用目录下拉框筛选特定目录的结果
  3. 查看结果

    • 点击图片查看详细信息
    • 在设置中开启"显示详细相似度信息"可查看更多信息
    • 点击预览图可放大查看
    • 双击文件名可复制
  4. 设置选项

    • 语言切换:支持中文和英文界面
    • 包含路径:设置要包含的文件路径规则
    • 排除路径:设置要排除的文件路径规则
    • 详细信息:开启/关闭相似度详细信息显示

技术特性

  • 使用 Sharp 库进行高效的图片处理
  • 实现了基于颜色直方图和形状特征的相似度计算
  • 采用多级缓存策略提高性能
  • 支持大规模图片库的高效搜索
  • 使用 Electron IPC 通信实现前后端分离
  • 算法说明见 README_ALGORITHM.md

安装和运行

开发环境

# 安装依赖
npm install

# 启动开发服务器
npm start

# 针对特定平台打包
npm run build:mac    # macOS
npm run build:win    # Windows