wehub-resource-sync
115 lines
4.9 KiB
Markdown
115 lines
4.9 KiB
Markdown
<!-- WEHUB_ZH_README -->
|
||
> [!NOTE]
|
||
> 本文档由 WeHub 基于上游 README 翻译整理，属于社区翻译，非官方中文文档。
|
||
> [English](./README.en.md) · [原始项目](https://github.com/joye61/pic-smaller) · [上游 README](https://github.com/joye61/pic-smaller/blob/HEAD/README.md)
|
||
> 原作者、版权与许可证归属以原始项目及本仓库 LICENSE 文件为准。
|
||
|
||
# Pic Smaller (图小小)
|
||
|
||
**Pic Smaller** 是一款超级易用的在线图片压缩工具。只需上传你想要的图片，Pic Smaller 就会自动执行压缩功能并提供结果详情。用户还可以自定义功能以满足期望的输出，例如设置输出格式或输出颜色数量。它直观易用，兼容网站和移动端，并支持压缩配置。同时，由于采用纯本地压缩、无任何服务端逻辑，因此完全安全。
|
||
|
||
<br/>
|
||
|
||
<div><img src="./docs/demo1.png"></div>
|
||
图 1：Pic Smaller 的落地页，用户可在此上传图片进行压缩
|
||
<br/>
|
||
<br/>
|
||
<div><img src="./docs/demo2.png"></div>
|
||
图 2：左侧展示用于压缩的示例图片，右侧展示 Pic Smaller 可自定义的压缩与编辑功能
|
||
<br/>
|
||
<br/>
|
||
<div><img src="./docs/demo3.png"></div>
|
||
图 3：Pic Smaller 的对比工具，用户可拖动以查看原图与压缩后图片的差异
|
||
<br/>
|
||
<br/>
|
||
|
||
## 用法
|
||
|
||
Pic smaller 已部署至 [`vercel`](https://vercel.com/), 你可以通过访问 URL [pic-smaller.vercel.app](https://pic-smaller.vercel.app). 来使用它。由于 GFW，中国用户可通过访问 URL [picsmaller.com](https://picsmaller.com/) 来使用。
|
||
|
||
> [picsmaller.com](https://picsmaller.com/) 是新申请的域名。旧域名 [txx.cssrefs.com](https://txx.cssrefs.com/) 仍可访问，但将于 `2025-02-22` 过期，且不会继续续费。请使用最新域名访问服务。
|
||
|
||
## 前置条件
|
||
|
||
Node.js
|
||
1. 前往 Node.js 官网：https://nodejs.org/en/
|
||
2. 下载推荐版本（当前为 v20.17.0）。
|
||
3. 按照电脑上的步骤完成安装。
|
||
4. 要验证安装是否成功，打开命令提示符并运行以下命令。如果输出了版本号，说明 Node.js 已成功安装。
|
||
```
|
||
node -v
|
||
```
|
||
|
||
## 开发
|
||
|
||
Pic smaller 是一个 [Vite](https://vitejs.dev/) + [React](https://react.dev/) 项目，你需要先熟悉它们。它使用了现代浏览器技术，如 `OffscreenCanvas`、`WebAssembly` 和 `Web Worker`。在开始开发之前，你也应该熟悉这些技术。
|
||
|
||
```bash
|
||
# 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
|
||
```
|
||
|
||
按住 Control 并左键点击 "Local:" 旁的 URL，即可在本地机器上打开网站。
|
||
|
||
|
||
<br/>
|
||
图 4：打开 localhost 网站链接的位置
|
||
|
||
|
||
## 部署
|
||
|
||
如果你想在自己的服务器上独立部署此项目，以下基于 Docker 的文档以及 [Dockerfile](./Dockerfile) 脚本已经过测试。在项目根目录中，按照说明启动 Docker 应用
|
||
|
||
```bash
|
||
# 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 端口。
|
||
|
||
## 贡献
|
||
|
||
1. 确保已正确完成所有必需依赖的安装，以便准确测试你的更改。
|
||
2. 更新 README.md，补充界面变更相关信息，包括新的环境变量、重要文件位置以及容器参数。
|
||
4. 在所有示例文件和 README.md 中提升版本号，以反映你的更改所代表的新版本。
|
||
5. 创建一个标题和描述恰当且具有说明性的 Pull Request。
|
||
6. 如有需要，可联系其他开发者审查并合并该 Pull Request。
|
||
|
||
我们的贡献标准：通过使用友好且包容的语言、尊重多元观点与经历、接纳建设性批评，并优先考虑社区的最佳利益，我们可以为每个人营造积极协作的环境。
|
||
|
||
## 项目结构
|
||
|
||
src 文件夹存放 React 应用中使用的所有文件和组件，例如 App.tsx。
|
||
<br/>
|
||
tests 文件夹包含开发过程中用于测试特定功能的代码。
|
||
<br/>
|
||
docs 文件夹包含本 README 文档所使用的图片。
|
||
|
||
## 许可证
|
||
|
||
本项目采用 [MIT](LICENSE) 许可证。
|
||
|
||
## 联系方式
|
||
|
||
如有任何问题，请联系仓库所有者 joye61 的邮箱：89065495@qq.com
|
||
|
||
## 致谢
|
||
|
||
- [ant-design](https://github.com/ant-design/ant-design) 提供基于 React 的 UI 解决方案
|
||
- [wasm-image-compressor](https://github.com/antelle/wasm-image-compressor) 提供基于 Webassembly 的 PNG 图片压缩实现
|
||
- [gifsicle-wasm-browser](https://github.com/renzhezhilu/gifsicle-wasm-browser) 提供基于 Webassembly 的 GIF 图片压缩实现
|
||
- [wasm_avif](https://github.com/packurl/wasm_avif) 提供基于 Webassembly 的 AVIF 图片压缩实现
|
||
- [svgo](https://github.com/svg/svgo) 提供 SVG 矢量压缩
|