将本地图片文件夹转为 HTML 文件

Posted 2021-04-04 Clericpy

因为代码量比较小, 暂时不打算上 pypi

https://github.com/ClericPy/somethings/releases

1. 源码 (推荐): https://github.com/ClericPy/somethings/blob/master/Python/pic2html.pyw

   直接复制源代码更干净, 因为没有第三方依赖, 不过需要 python 解释器环境, windows 下双击即可运行

2. 单文件 exe: pic2html-single.exe

   每次执行会产生临时文件, 执行结束会自动清理

3. 文件夹 exe: pic2html.zip

   不产生临时文件, 不过需要解压缩

场景

日常生活中, 总有需要浏览大量图片的时候, 比如打包的 漫画 / 壁纸 / 相片 / 素材, 浏览图片集过程中, 也会产生一些常见的需求:

1. 图片放大拉宽, 方便文字阅读

2. 能快速定位到文件的路径和名称

3. 一次加载多张图片, 免得手动一张张翻页

4. 支持多种图片格式

5. 单文件 exe 无需安装

用法

1. 手动复制要处理的文件夹路径

2. 执行脚本, 会自动从剪切板中读取路径

1. 可能是 pyw 文件, 也可能是 exe 文件

3. 等待执行结束, 自动打开浏览器查看

1. 单个文件夹标题点击会回到顶部
   

2. 双击图片则打开单个图片方便单独放大

3. 顶部调整图片宽度占比

4. 顶部锚点链接负责跳转到指定文件夹路径

5. 每张图片的右下角会有小字显示文件名和路径

4. HTML 文件会放在剪切板路径中, 命名以 - 开头

细节

1. HTML 文件要与文件夹放在一起, 不留冗余文件

1. 因为都是相对路径, 所以不能到处移动, 这符合设计不需要处理

2. HTML 文件名为了排序有利, 会使用该文件夹的名字并且以 - 开头

3. linux 和 windows 系统都有最大路径长度问题, 所以最终文件名路径会控制在 200 字符以内

2. 图片如果数量过多, 会特别的慢

1. 加载特别慢, 借助 IntersectionObserver 实现图片的懒加载

2. 遍历文件夹特别慢, 则每隔一定时间弹出对话框询问是否还要继续, 这个主要是由此对整个磁盘执行了该脚本

3. 嵌套的子目录太多, 浏览不方便

1. 子目录的路径信息也是有价值的信息, 所以会按照顺序做标题, 绑定锚点

2. 文件名有可能格式错误, 所以会做 md5 方便跳转

4. 操作尽可能地少, 最好的软件是不需要交互的

1. 程序读取了剪切板里的路径, 全程自动

2. HTML 生成完毕后, 会使用默认浏览器打开该 HTML, 省的去找

5. 程序崩溃或超时的时候, 可以弹出对话框提醒相关信息

6. 尽可能支持多的图片格式: .pcd .gif .jfif .raw .pcx .svg .pjpeg .pjp .eps .fpx .tga .cur .WMF .psd .tiff .png .ufo .tif .bmp .exif .ico .jpeg .jpg .ai .webp .cdr .dxf .apng

7. 安装方便

1. 如果没有安装 pyperclip, 则自己手动输入路径

1. 打包一份单文件 exe

2. 或者自行安装依赖, 然后在 windows 上双击

8. 图片和文件夹的排序要避免 10.jpg < 2.jpg

1. 简单的方法就是先找出文件名里所有数字, 然后对所有数字左边都补 0, 补到统一长度为 10, 做前缀进行排序, 用冒号隔开, 需要填入路径的时候, 以冒号 split 一次取后半截即可

截图