image-minify-client

• English
• 한국어

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

imageMinify

Note

• Support input type only bmp, png, gif, jpeg, webp
• Support output type only jpeg and webp
• 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 the 0 < value <= 1 range.
• maxWidth : (default: undefined) Greater then 0. If the width of the image is greater than maxWidth, the width is adjusted to maxWidth while maintaining the proportions.
• maxHeight : (default: undefined) Greater then 0. If the height of the image is greater than maxHeight, the height is adjusted to maxHeight while maintaining the proportions.
• outputType : (default: jpeg) String jpeg | 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.