0.6.1 • Published 4 years ago
browser-image-compressor v0.6.1
browser-image-compressor
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 nativecanvas.toBlobAPI to do the compression work.
You can use a File or Blob.一个简单的图片压缩库，你可以在图片上传之前对其进行压缩，最后返回一个
Blob对象。
你也可以指定图片的压缩大小以及限制输出的尺寸。
它使用浏览器canvas.toBlobAPI进行压缩，这意味着它是有损压缩。如果图片是png格式，可能会最终转换成jpeg，当然你可以控制它的输出背景。
features
- 指定压缩文件大小
- 读取拍摄图像的
Exif.orientation值，并修正图像方向（仅JPEG图像） - 限制图片尺寸压缩的最大值或最小值
- 支持
png输出背景设置
Getting started
Install
npm install browser-image-compressor --save
# or
yarn add browser-image-compressorUsage
new Compressor(file[, options])file
The target image file for compressing.
options
- Type:
Object - Optional
The options for compressing. Check out the available options.
Example
<input type="file" id="file" accept="image/*">import Compressor from 'browser-image-compressor'
$('#file').on('change', function(e) {
const file = e.target.files[0]
if (file && file.name) {
new Compressor(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
browser-image-compressorFork from: compressorjs@fengyuanchen在开发拍摄图片上传功能时，发现部分移动设备拍摄上传的图片方向会自动旋转。在 stackoverflow 找到了原因和解决方案，但是处理后在Android和iOS设备上表现不一致（可能是自己的代码有误，并未发现其他人提出该问题）。最后发现 compressorjs 比较符合预期，但是没有指定压缩大小功能，所以在
compressorjs基础上增加了指定压缩大小的功能，并简化了部分源码。