Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/marinerer/imagemin.js
JavaScript image compressor, which can specify size to compress the image. 🗜️ 上传图片时的压缩库，可指定图片压缩大小
https://github.com/marinerer/imagemin.js
canvas-compress comporessor image-compressor
Last synced: 7 days ago
JSON representation
JavaScript image compressor, which can specify size to compress the image. 🗜️ 上传图片时的压缩库，可指定图片压缩大小
- Host: GitHub
- URL: https://github.com/marinerer/imagemin.js
- Owner: Marinerer
- License: mit
- Created: 2020-07-08T12:17:16.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T10:56:49.000Z (almost 2 years ago)
- Last Synced: 2024-10-29T23:56:21.692Z (8 days ago)
- Topics: canvas-compress, comporessor, image-compressor
- Language: JavaScript
- Homepage:
- Size: 759 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# imagemin-web
> A simple image compressor that can be used to compress and resize image, And you can specify the image compression size.
> It use the Browser's native `canvas.toBlob` API to do the compression work.
> You can use a File or Blob.
>
> 一个简单的图片压缩库，你可以在图片上传之前对其进行压缩，最后返回一个`Blob`对象。
> 你也可以指定图片的压缩大小以及限制输出的尺寸。
> 它使用浏览器 `canvas.toBlob` API进行压缩，这意味着它是有损压缩。如果图片是`png`格式，可能会最终转换成 `jpeg`，当然你可以控制它的输出背景。
## features
1. 指定压缩文件大小
2. 读取拍摄图像的`Exif.orientation` 值，并修正图像方向（仅JPEG图像）
3. 限制图片尺寸压缩的最大值或最小值
4. 支持 `png` 输出背景设置
## Getting started
### Install
**npm**
```
npm install imagemin-web --save
# or
yarn add imagemin-web
```
**Browser**
```html
```
### Usage
```js
new Imagemin(file[, options])
```
**file**
- Type: [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File) or [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob)
The target image file for compressing.
**options**
- Type: `Object`
- Optional
- maxWidth: Number, `Infinity`
- maxHeight: Number, `Infinity`
- minWidth: Number, `0`
- minHeight: Number, `0`
- maxSize: Number, `Infinity`
- quality: [0 - 1], `0.95`
- checkOrientation: Boolean, `true`
- mimeType: String
- validated: `function({ width, height, size, type })`
- beforeDraw: `function(context, canvas)`
- drew: `function(context, canvas)`
- success: `function(file)`
- fail: `function(error)`
**Example**
```html
<input type="file" id="file" accept="image/*">
```
```js
import Imagemin from 'imagemin-web'
$('#file').on('change', function(e) {
const file = e.target.files[0]
if (file && file.name) {
new Imagemin(file, {
maxWidth: Infinity,
maxHeight: Infinity,
minWidth: 0,
minHeight: 0,
maxSize: 500, // kb
quality: 0.9,
checkOrientation: true,
mimeType: '',
validated({ width, height, size, type }) {
return true
},
beforeDraw(context, canvas) {
context.fillStyle = '#ff0'
context.fillRect(0, 0, canvas.width, canvas.height)
},
drew: (context, canvas) => {},
success(result) {
const formData = new FormData()
formData.append('file', result)
fetch('/api/v1/upload/', {
method: 'POST',
body: JSON.stringify(formData)
})
.then(res => res.json())
.then(() => {
console.log('upload success')
})
},
fail: error => {}
})
}
})
```
## Browser support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Opera (latest)
- Edge (latest)
- Internet Explorer 10+
## Fork from
> `imagemin-web` Fork from: [compressorjs@fengyuanchen](https://github.com/fengyuanchen/compressorjs)
>
> 在开发拍摄图片上传功能时，发现部分移动设备拍摄上传的图片方向会自动旋转。在 [stackoverflow](https://stackoverflow.com/questions/20600800/) 找到了原因和解决方案，但是处理后在Android和iOS设备上表现不一致（可能是自己的代码有误，并未发现其他人提出该问题）。最后发现 [compressorjs](https://github.com/fengyuanchen/compressorjs) 比较符合预期，但是没有指定压缩大小功能，所以在 `compressorjs` 基础上增加了指定压缩大小的功能，并简化了部分源码。
## References
- [JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images - stackoverflow](https://stackoverflow.com/questions/20600800/)
- [Accessing JPEG EXIF rotation data in JavaScript on the client side - stackoverflow](https://stackoverflow.com/questions/7584794/)
- [笔记：使用 JavaScript 读取 JPEG 文件 EXIF 信息中的 Orientation 值 - 知乎](https://zhuanlan.zhihu.com/p/25216999)