Pic Smaller (图小小)是开源社区Github上的一个在线图像压缩工具网站源码,基于 Vite+React 技术栈开发,支持 JPEG/PNG/WebP/Gif 四种格式的图片压缩。
Pic Smaller是一款超级好用的在线图片压缩工具。其用户界面直观且支持压缩配置。同时,由于是基于浏览器本地进行图片压缩,没有任何服务端交互,图片不会被上传到远程服务器,因此是完全安全的。
项目下载:
https://github.com/joye61/pic-smaller.git
技术实现
- JPEG/WebP 压缩:利用了现代浏览器自带的功能,叫离屏渲染技术 OffscreenCanvas
- PNG 压缩:采用了一个第三方的 Webassembly 实现,底层是 libPNG
- Gif 压缩:采用了一个第三方的 Webassembly 实现,底层是 Gifsicle
用法
Pic smaller 已部署到vercel
,您可以通过访问网址pic-smaller.vercel.app来使用它。由于 GFW,中国用户可以通过访问网址picsmaller.com来使用它
二开
这是一个纯vite + React项目,你必须先熟悉它们。Pic small 使用现代浏览器技术,例如OffscreenCanvas
、WebAssembly
和Web Worker
。在开发之前你也应该熟悉它们。
# Clone the repo
git clone https://github.com/joye61/pic-smaller.git
# Change cwd
cd ./pic-smaller
# Install dependences
npm install
# Start to develop
npm run dev
部署
如果你想在自己的服务器上独立部署这个项目,下面基于Docker的文档,以及Dockerfile脚本已经过测试。在项目根目录中,按照说明启动 docker 应用程序
# Build docker image from Dockerfile
docker build -t picsmaller .
# Start a container
docker run -p 3001:3001 -d picsmaller
现在您可以通过http://127.0.0.1:3001访问该项目。如果你想让你的项目对所有人都可以访问,你需要准备一个指向你本机的域名,然后通过nginx这样的反向代理服务器代理到本机的3001端口。