wehub/joye61--pic-smaller
1
0
Fork 0
Code Issues Pull Requests Actions Deployments Models Agent Notes Packages Projects Releases Wiki Activity

docs: make Chinese README the default

Browse Source
This commit is contained in:
wehub-resource-sync
2026-07-13 10:21:01 +00:00
parent 56c28ba30e
commit 02b5fa8804
1 changed files with 46 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+46 -40
View File
@@ -1,42 +1,48 @@
<!-- 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** is a super easy-to-use online image compression tool. Simply upload your desired image(s), and Pic Smaller will automatically perform its compress functionality and provide details on the results. Users can also customize features to suite their desired output, such as setting the output format or number of output colors. It's intuitive, website and mobile friendly, and supports compression configuration. At the same time, because of purely local compression without any server-side logic, it is completely safe.
**Pic Smaller** 是一款超级易用的在线图片压缩工具。只需上传你想要的图片，Pic Smaller 就会自动执行压缩功能并提供结果详情。用户还可以自定义功能以满足期望的输出，例如设置输出格式或输出颜色数量。它直观易用，兼容网站和移动端，并支持压缩配置。同时，由于采用纯本地压缩、无任何服务端逻辑，因此完全安全。
<br/>
<div><img src="./docs/demo1.png"></div>
Figure 1: Pic Smaller's landing page, where users can upload their images for compression
图 1：Pic Smaller 的落地页，用户可在此上传图片进行压缩
<br/>
<br/>
<div><img src="./docs/demo2.png"></div>
Figure 2: Example pictures uploaded for compression shown on the left, and Pic Smaller's customizable compression and editing features shown on the right
图 2：左侧展示用于压缩的示例图片，右侧展示 Pic Smaller 可自定义的压缩与编辑功能
<br/>
<br/>
<div><img src="./docs/demo3.png"></div>
Figure 3: Pic Smaller's comparison tool, that the user can drag to see the difference between the original and compressed image
图 3：Pic Smaller 的对比工具，用户可拖动以查看原图与压缩后图片的差异
<br/>
<br/>
## Usage
## 用法
Pic smaller has been deployed to [`vercel`](https://vercel.com/), you can use it by visiting the URL [pic-smaller.vercel.app](https://pic-smaller.vercel.app). Due to the GFW, Chinese users can use it by visiting the URL [picsmaller.com](https://picsmaller.com/)
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/) is a new domain that has just been applied for. The old domain [txx.cssrefs.com](https://txx.cssrefs.com/) is still accessible, but will be expired on `2025-02-22` and payment will not continue. Please use the latest domain to access the service.
> [picsmaller.com](https://picsmaller.com/) 是新申请的域名。旧域名 [txx.cssrefs.com](https://txx.cssrefs.com/) 仍可访问，但将于 `2025-02-22` 过期，且不会继续续费。请使用最新域名访问服务。
## Preqrequisites
## 前置条件
Node.js
1. Navigate to the Node.js website: https://nodejs.org/en/
2. Download the recommended version (which is currently v20.17.0).
3. Follow the steps on your computer to finish its installation.
4. To verify installation, open up the command prompt and run the following command. If the version is outputted, you have succesfully installed Node.js.
1. 前往 Node.js 官网：https://nodejs.org/en/
2. 下载推荐版本（当前为 v20.17.0）。
3. 按照电脑上的步骤完成安装。
4. 要验证安装是否成功，打开命令提示符并运行以下命令。如果输出了版本号，说明 Node.js 已成功安装。
```
node -v
```
## Develop
## 开发
Pic smaller is a [Vite](https://vitejs.dev/) + [React](https://react.dev/) project, you have to get familiar with them first. It uses modern browser technologies such as `OffscreenCanvas`, `WebAssembly`, and `Web Worker`. You should also be familiar with them before developing.
Pic smaller 是一个 [Vite](https://vitejs.dev/) + [React](https://react.dev/) 项目，你需要先熟悉它们。它使用了现代浏览器技术，如 `OffscreenCanvas`、`WebAssembly` 和 `Web Worker`。在开始开发之前，你也应该熟悉这些技术。
```bash
# Clone the repo
@@ -52,16 +58,16 @@ npm install
npm run dev
```
Hold control and left click the URL next to "Local:" to open the website on your local machine.
按住 Control 并左键点击 "Local:" 旁的 URL，即可在本地机器上打开网站。
![image](https://github.com/user-attachments/assets/b82b296d-74bf-48db-8284-34f2db3b8c3f)
<br/>
Figure 4: Where to open the localhost website link
图 4：打开 localhost 网站链接的位置
## Deploy
## 部署
If you want to independently deploy this project on your own server, the following document based on Docker, and [Dockerfile](./Dockerfile) script has been tested. Within the project root directory, follow the instructions to start docker application
如果你想在自己的服务器上独立部署此项目，以下基于 Docker 的文档以及 [Dockerfile](./Dockerfile) 脚本已经过测试。在项目根目录中，按照说明启动 Docker 应用
```bash
# Build docker image from Dockerfile
@@ -71,38 +77,38 @@ docker build -t picsmaller .
docker run -p 3001:3001 -d picsmaller
```
Now you can access the project via http://127.0.0.1:3001. If you want your project to be accessible to everyone, you need to prepare a domain name pointing to your local machine, and then proxy it to port 3001 of this machine, through a reverse proxy server like nginx.
现在你可以通过 http://127.0.0.1:3001. 访问项目。如果你希望项目对所有人可访问，你需要准备一个指向本地机器的域名，然后通过 nginx 等反向代理服务器将其代理到本机的 3001 端口。
## Contributing
## 贡献
1. Ensure all required dependency installations have been properly followed to accurately test your changes.
2. Update the README.md with information about changes to the interface, including new environment variables, important file locations, and container parameters.
4. Increase the version numbers in all example files and the README.md to reflect the new version represented by your changes.
5. Create a Pull Request with an appropriate and descriptive title and description.
6. You can reach out to other developers to review and merge the Pull Request if appropriate.
1. 确保已正确完成所有必需依赖的安装，以便准确测试你的更改。
2. 更新 README.md，补充界面变更相关信息，包括新的环境变量、重要文件位置以及容器参数。
4. 在所有示例文件和 README.md 中提升版本号，以反映你的更改所代表的新版本。
5. 创建一个标题和描述恰当且具有说明性的 Pull Request。
6. 如有需要，可联系其他开发者审查并合并该 Pull Request。
Our standards for contributions: By using welcoming and inclusive language, respecting diverse viewpoints and experiences, embracing constructive criticism, and prioritizing what’s best for the community, we can create a positive and collaborative environment for everyone.
我们的贡献标准：通过使用友好且包容的语言、尊重多元观点与经历、接纳建设性批评，并优先考虑社区的最佳利益，我们可以为每个人营造积极协作的环境。
## Project Structure
## 项目结构
The src folder stores in all the files and components used in the react application like App.tsx.
src 文件夹存放 React 应用中使用的所有文件和组件，例如 App.tsx。
<br/>
The tests folder includes code to test particular features during the development process.
tests 文件夹包含开发过程中用于测试特定功能的代码。
<br/>
The docs folder includes the pictures used for this README documentation.
docs 文件夹包含本 README 文档所使用的图片。
## License
## 许可证
This project is under [MIT](LICENSE) license.
本项目采用 [MIT](LICENSE) 许可证。
## Contact
## 联系方式
Please contact the repository owner joye61's email for any questions: 89065495@qq.com
如有任何问题，请联系仓库所有者 joye61 的邮箱：89065495@qq.com
## Thanks
## 致谢
- [ant-design](https://github.com/ant-design/ant-design) Provides React-based UI solutions
- [wasm-image-compressor](https://github.com/antelle/wasm-image-compressor) Provides PNG image compression implementation based on Webassembly
- [gifsicle-wasm-browser](https://github.com/renzhezhilu/gifsicle-wasm-browser) Provides GIF image compression implementation based on Webassembly
- [wasm_avif](https://github.com/packurl/wasm_avif) Provides AVIF image compression implementation based on Webassembly
- [svgo](https://github.com/svg/svgo) Provides SVG vector compression
- [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 矢量压缩