Skip to content

HaujetZhao/Gallery-Viewer-HTML

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

36 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

📸 Gallery Viewer (相册浏览器)

一个现代、轻量且完全本地化的 Web 相册浏览器。支持图片、视频、音频等多种媒体格式,无需上传,保护隐私,直接在浏览器中流畅管理和查看你的本地媒体库。

demo-01

demo-02

✨ 核心亮点

  • 🛡️ 隐私优先:基于 File System Access API 构建,所有操作均在本地完成,媒体数据绝不上传云端。
  • 🚀 极致便携:静态 HTML 文件入口,无需本地服务器,随开随用。
  • ⚡ 高性能
    • 虚拟滚动 & 懒加载:轻松处理数千个媒体文件的文件夹。
    • IndexedDB 缓存:自动缓存缩略图,二次打开瞬时加载。
  • 🎨 现代 UI/UX:支持平滑缩放、拖拽平移、键盘快捷键导航。

🛠️ 功能特性

  • 🎬 多媒体支持
    • 图片: JPG, PNG, GIF, WebP, BMP, SVG
    • 视频: MP4, WebM, OGG, MOV, MKV, FLV, AVI
    • 音频: MP3, WAV, OGG, FLAC, M4A
  • 📁 文件树导航:侧边栏实时同步文件系统结构,支持展开/收起。
  • 🔍 文件管理
    • 文件操作:重命名、删除、拖拽移动(皆可 Ctrl+Z 撤销)
    • 文件夹操作:删除(不可撤销,会二次确认)
    • 多种排序(名称、大小、日期)和文件名过滤。
  • ℹ️ 详细的元数据信息
    • 图片 EXIF: 相机参数(光圈、快门、ISO 等)。
    • 视频信息: 分辨率、时长、比特率。
    • 音频 ID3: 歌手、专辑、缩略图。
    • 智能地图定位:自动识别 GPS 信息,提供 Google、高德、百度 三种地图跳转,支持 WGS84 坐标自动纠偏。
  • 🖱️ 高效交互
    • 自动滚动:鼠标悬停在屏幕边缘自动滚动浏览。
    • 快捷键支持Ctrl+C 复制图片,方向键切换,ESC 关闭。

💻 技术栈

  • Core:原生 JavaScript (ES6+), HTML5, CSS3
  • Storage: IndexedDB (LocalForage 风格封装)
  • API: File System Access API
  • Libraries:
    • exif-js: 元数据读取
    • SparkMD5: 文件哈希计算
    • FontAwesome: 图标库

🚀 快速开始

  1. 下载本项目代码。
  2. 直接双击 index.html 打开。
  3. 点击界面通常的 "打开文件夹" 按钮,授权访问你的图片目录。
  4. Enjoy!

⚠️ 兼容性说明

由于使用了 File System Access API,本项目目前最佳支持以下浏览器(桌面端):

  • Chrome / Edge (86+)
  • Opera

注意:Firefox for Desktop 目前暂未原生支持此 API 的完整功能。


Created with ❤️ by Antigravity

About

网页端的图库查看器,打开文件夹,浏览里面的图片

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors