Image Minify Client
Image Minify Client scales down by removing metadata from the browser and adjusting quality using canvas APIs.
It was created to reduce bandwidth and server CPU load. :)
Demo website
Note
- Support input type only
bmp
,png
,gif
,jpeg
,webp
- Support output type only
jpeg
andwebp
- Loses animation if it has animation
Install
npm install image-minify-client
Quickstart example code
<img id="img" src="" alt="">
<input id="input" type="file">
import imc from "image-minify-client"
const img = document.getElementById('img')
const input = document.getElementById('input')
input.addEventListener('change', event => {
const file = event.target.files[0]
if (!file) { return }
imc(file).then(rslt => {
const newFile = rslt[0]
const oldFile = rslt[1]
img.src = URL.createObjectURL(newFile)
console.log(newFile, oldFile)
})
})
Usage
Syntax
module(File[, options])
Parameter
File
Require. Image object of file type.
options
Optional.
- quality : (default:
0.8
) Number in the0
< value <=1
range. - maxWidth : (default:
undefined
) Greater then0
. If the width of the image is greater than maxWidth, the width is adjusted to maxWidth while maintaining the proportions. - maxHeight : (default:
undefined
) Greater then0
. If the height of the image is greater than maxHeight, the height is adjusted to maxHeight while maintaining the proportions. - outputType : (default:
jpeg
) Stringjpeg
|webp
Return
Since this method is asynchronous, it returns a promise
. In case of resolve
, an array of File
objects is returned as shown below.
[ newFile , oldFile ]
Syntax
imc(File, {
quality: 0.75,
maxHeight: 300,
outputType: 'webp'
}).then(result => {
console.log('Before minify file: ', result[1])
console.log('After minify file: ', result[0])
})
error
If an error occurs during operation, an object such as { code: number, message: string }
is returned as an error. Even with the same error code, the message may be different. Details are as follows.
Code | Message |
---|---|
400 | The first parameter cannot be empty. |
400 | The first parameter is not a File type. |
404 | The image could not be loaded. |
409 | The process is already running. |
412 | Failed to minify image. |
413 | Image is over than the size supported. |
415 | The first parameter is not a Image File type. |
415 | "${ fileFormat }" format is not support |
501 | Does not support modules. |