cover

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

由于 MacOS 下的 preview 工具无法查看动态 webp 图片, 因此使用 Node.js 实现使用浏览器查看图片的工具.

2022-03-12

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

heading

基本功能

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

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

  2. 使用

    左方向键
    和
    右方向键
    切换图片;

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

heading

开发思路

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

C4 Modeling
heading

基本流程

  1. 读取用户指定路径

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

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

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

heading

编译

  1. 按需安装 Node.js

  2. 安装依赖:

    yarn
    或
    npm install

  3. 使用 pkg 打包可执行文件:

    yarn build
    或
    npm run build

heading

使用

  1. (可选)创建软连接:

    ln -sf /path/to/project/build/browse /usr/local/bin

  2. 在 shell 中打开目标文件夹:

    browse /absolute/path/to/directory

heading

改进思路

  • 打开嵌套的文件夹

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

  • 使用右键打开

  • 添加 gallery 模式

  • 优化样式

  • 添加放大/缩小快捷键

  • 添加放大/缩小控件

  • 添加旋转图片快捷键

  • 添加旋转图片控件

  • 添加自动播放快捷键

  • 添加自动播放控件

  • 缓存文件 metadata

  • 提高安全性