browse: 使用浏览器查看动态 webp 图片

由于 MacOS 下的 preview 无法查看动态 webp 文件, 因此开发了 browse, 借助浏览器浏览这类文件.

基本功能

这个工具的核心目标是实现图片浏览, 第一版本实现了以下功能:

1. 在浏览器中查看特定文件夹中的图片(按文件名称升序排列);

2. 使用 左方向键 和 右方向键 切换图片;

3. 使用侧边导航栏跳转到特定图片.

开发思路

基本思路是实现一个 B/S 架构的应用, 接收目标文件夹路径并读取其中的文件信息后构建基本浏览器界面, 启动一个简易的 HTTP 服务器用于 host 静态内容(基本界面和图片).

基本流程

1. 读取用户指定路径

2. 检查路径并读取图片基本信息

3. 基于图片基本信息构建界面 html

4. 使用 http 模块实现一个简易的文件服务器用于 host 界面 html 和图片

编译

1. 按需安装 Node.js

2. 安装依赖: yarn 或 npm install

3. 使用 pkg 打包可执行文件: yarn build 或 npm run build

使用

1. (可选)创建软连接: ln -sf /path/to/project/build/browse /usr/local/bin

2. 在 shell 中打开目标文件夹: browse /absolute/path/to/directory

改进思路

• 打开嵌套的文件夹

• 自动在浏览器中打开页面

• 使用右键打开

• 添加 gallery 模式

• 优化样式

• 添加放大/缩小快捷键

• 添加放大/缩小控件

• 添加旋转图片快捷键

• 添加旋转图片控件

• 添加自动播放快捷键

• 添加自动播放控件

• 缓存文件 metadata

• 提高安全性