A simple JavaScript image compressor. Uses the Browser's native canvas.toBlob API to do the compression work. General use this to precompress a client image file before upload it.

• Website

• Main
• Getting started
• Options
• Methods
• Browser support
• Versioning
• License

dist/
├── image-compressor.js        (10 KB, UMD)
├── image-compressor.min.js    ( 4 KB, UMD, compressed)
├── image-compressor.common.js (10 KB, CommonJS, default)
└── image-compressor.esm.js    (10 KB, ES Module)

• Download the latest release.
• Clone the repository: git clone https://github.com/xkeshi/image-compressor.git.
• Install with NPM: npm install xkeshi/image-compressor.

new ImageCompressor([file[, options]])

file

• Type: File or Blob
• Optional

The target image file for compressing.

options

• Type: Object
• Optional

The options for compressing. Check out the available options.

<input type="file" id="file" accept="image/*">

import axios from 'axios';
import ImageCompressor from 'image-compressor';

document.getElementById('file').addEventListener('change', (e) => {
  const file = e.target.files[0];

  if (!file) {
    return;
  }

  new ImageCompressor(file, {
    quality: .6,
    success(result) {
      const formData = new FormData();

      formData.append('file', result);

      // Send the compressed image file to server with XMLHttpRequest.
      axios.post('/path/to/upload', formData).then(() => {
        console.log('Upload success!');
      });
    },
    error(e) {
      console.log(e.message);
    },
  });
})

⬆ back to top

• Type: number
• Default: undefined

The width of the output image. If not specified, the natural width of the original image will be used.

• Type: number
• Default: undefined

The height of the output image. If not specified, the natural height of the original image will be used.

• Type: number
• Default: 0.8

The quality of the output image. It must be a number between 0 and 1. Be careful to use 1 as it may make the size of the output image become larger. Check out canvas.toBlob for more detail.

Note: This option only available for image/jpeg and image/webp images.

Examples (in Chrome 59):

• Type: Function
• Default: null
• Parameters:
  • result: The compressed image (a Blob object).

The success callback for the image compressing process.

• Type: Function
• Default: null
• Parameters:
  • err: The compression error (an Error object).

The error callback for the image compressing process.

⬆ back to top

• file:
  • Type: File or Blob
  • The target image file for compressing.
• options (optional):
  • Type: Object
  • The options for compressing.
• (return value):
  • Type: Promise

Compress an image file.

const imageCompressor = new ImageCompressor();

imageCompressor.compress(file, options)
  .then((result) => {
    // Handle the compressed image file.
  })
  .catch((err) => {
    // Handle the error
  })

⬆ back to top

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Opera (latest)
• Edge (latest)
• Internet Explorer 11+

Maintained under the Semantic Versioning guidelines.

MIT © Xkeshi

⬆ back to top