https://github.com/ghkmmm/shrinkpng
Compress the image files obtained by the front end
https://github.com/ghkmmm/shrinkpng
image-compression react tinypng typescript vuejs
Last synced: about 1 year ago
JSON representation
Compress the image files obtained by the front end
- Host: GitHub
- URL: https://github.com/ghkmmm/shrinkpng
- Owner: GHkmmm
- Created: 2022-05-20T05:55:43.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-13T09:53:30.000Z (over 3 years ago)
- Last Synced: 2025-04-03T02:01:54.279Z (about 1 year ago)
- Topics: image-compression, react, tinypng, typescript, vuejs
- Language: JavaScript
- Homepage: http://compress.tracex.top
- Size: 135 KB
- Stars: 18
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
shrinkpng
Compress the image files obtained by the front end
💻 Official website
🌍 Github
🚀 Npm
使用[UPNG.js](https://github.com/photopea/UPNG.js)对 PNG 文件进行有损缩小，类似于[TinyPNG](https://tinypng.com/)和其他工具。
## 安装
打开终端运行下列命令：
```
npm install shrinkpng
```
或
```
yarn add shrinkpng
```
## 开始使用
请先[下载]()本插件
然后在你的代码中引入 shrinkpng
```js
import { shrinkImage } from "shrinkpng";
...
const _file = await shrinkImage(file, {
quality: 80
});
```
#### Vue 文件示例
代码示例
```vue
import { shrinkImage } from "shrinkpng";
export default {
name: "App",
mounted() {
document.getElementById("imgUpFile").addEventListener("change", (e) => {
const file = e.target.files[0];
const _file = await shrinkImage(file, {
quality: 80
}); // compress file
});
},
};
```