<!-- 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，即可在本地机器上打开网站。

![image](https://github.com/user-attachments/assets/b82b296d-74bf-48db-8284-34f2db3b8c3f)
<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 矢量压缩