今天做成的成品:本地浏览器实现图片转PDF工具(图转宝)
01
今天看到一条视频,讲的是一个人用 AI 批量做独立网站,成绩斐然。
视频里说,2024 年他做了 100 多个网站,大部分失败了,但成功的那几个带来稳定收入。
看完之后我就在想:我能不能也做一个?
需求很简单——图片转 PDF。这是我自己经常用的功能,市面上工具也挺多,但是都有套路,你懂的。我一直想有一个自己的。
于是我跟我的 AI 助手说了这个想法,然后……
02
我跟它说:
"帮我做一个图片转 PDF 的网站,纯前端,拖拽上传、多图排序、一键下载。"
然后它就开干了。
没有问我用什么框架。没有叫我先画原型图。没有让我写需求文档。直接给我写了一个完整的 HTML 文件,里面包含了:
-
拖拽上传图片
-
缩略图预览
-
拖拽排序
-
纸张尺寸选择(A4 / Letter / 原尺寸)
-
每页放几张图片
-
图片质量控制
-
一键转 PDF 下载
整个代码大概 600 行,生成时间大概 几十秒。
03
它是怎么做到的?
核心靠的是一个叫 pdf-lib 的 JavaScript 库。
这个库的作用很简单——在浏览器里直接生成 PDF 文件。和你用 Python 的 PyMuPDF 或者 ReportLab 做的是同一件事,区别只是运行环境从服务器搬到了浏览器里。
整个流程是这样的:
你上传图片(拖拽 or 点击)
↓
浏览器读取图片数据(FileReader API)
↓
pdf-lib 创建 PDF,按你选的纸张尺寸生成页面
↓
计算每张图片放哪里、缩放多少
↓
把图片嵌入 PDF 页面
↓
生成 PDF 二进制文件,用 Blob 下载
关键点:所有处理都在你的浏览器里完成,图片从来没有离开过你的手机和电脑。
这也是为什么我说"纯前端"——不需要服务器,不需要买云主机,不需要部署,就是一个文件,浏览器打开就能用。
04
代码生成完之后,我又让它帮我:
-
写了一个好看的界面(响应式,手机也能用)
-
设置了中文界面
-
加了加载动画和提示文字
-
写了分享指引
整个过程,我做的事情只有:
-
提出需求
-
看效果
-
提修改意见(如果需要)
-
说"好,可以了"
其余全部 AI 完成。
05
10 分钟后,我手里有了一个完整的产品:
-
一套前端代码(一个 HTML 文件)
-
可以直接发给朋友测试
-
也可以上传到 Vercel / GitHub Pages 变成真正的网站
-
全程零成本
没有买域名。没有租服务器。没有学 React/Vue/Next.js。没有搭 CI/CD。
就是一个 HTML 文件。
06
事后我在想,这件事最让我震撼的,其实不是"技术"本身。
是门槛的消失。
以前你想做一个网站,哪怕是最简单的图片转 PDF 网站,你需要:
-
学 HTML/CSS/JavaScript
-
搭开发环境
-
理解 HTTP 和服务器
-
买域名、租服务器、配置部署
-
……
现在你需要的,只是一句准确描述你想要的描述。
剩下的,AI 来填。
07
当然,我知道这篇文章写出来,一定有人会说:
"就这?一个 HTML 文件?这种东西做出来能赚钱吗?"
我也在想这个问题。
也许不能。也许做 100 个才能成 1 个。也许还没上线就没人访问。
但这件事让我深刻感受到:动手做一件事情的代价,已经降到了历史最低。
你有一个想法,现在就可以验证。你有一项技能,现在就可以变现。你想学一样东西,现在就可以开始。
不需要完美的计划,不需要完整的准备,不需要等"准备好了"再行动。
先做,再迭代。
08
最后说一下这个工具本身:
图转宝 - 图片转 PDF 工具
功能:
-
拖拽上传多张图片
-
拖拽缩略图调整顺序
-
支持 A4 / Letter / 4×6 / 原尺寸纸张
-
支持 1/2/4/6 张图每页
-
调整图片质量
-
完全免费,无水印,无广告
全程在浏览器本地处理,不上传到任何服务器。
如果你也想试试做一个自己的小工具,别想了,现在就动手。
你缺的从来不是技术,是第一步。
文末彩蛋:长按关注作者公众号,发送“图转宝”,领取文中产品。建议下载后,微信聊天窗口里选择手机文件,点收藏,加标签,以后就能一直在本地用这个功能啦!
附图转宝使用教程。从微信打开本地文件开始(默认文件你从阿里云盘已下载),用手机或者 pc自带的浏览器打开就能用了,到最后的成品PDF下载到本地。