browser-image-compression

The imageCompression function returns a Promise that resolves to a compressed File (which is an instance of Blob). You can use async/await syntax to handle the compression process and catch errors.

async function handleImageUpload(event) {

  const imageFile = event.target.files[0];
  console.log('originalFile instanceof Blob', imageFile instanceof Blob); // true
  console.log(`originalFile size ${imageFile.size / 1024 / 1024} MB`);

  const options = {
    maxSizeMB: 1,
    maxWidthOrHeight: 1920,
    useWebWorker: true,
  }
  try {
    const compressedFile = await imageCompression(imageFile, options);
    console.log('compressedFile instanceof Blob', compressedFile instanceof Blob); // true
    console.log(`compressedFile size ${compressedFile.size / 1024 / 1024} MB`); // smaller than maxSizeMB

    await uploadToServer(compressedFile); // write your own logic
  } catch (error) {
    console.log(error);
  }

}

The following pattern demonstrates how to use browser-image-compression to compress a user-selected file and then upload the resulting blob to a server via a POST request using FormData.

1. Use imageCompression(file, options) to compress the image.
2. In the .then() callback, wrap the output in a FormData object.
3. Use fetch with method: 'POST' to send the FormData to your API endpoint (e.g., http://localhost:3000/image-upload-api).

<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/browser-image-compression@2.0.2/dist/browser-image-compression.js"></script>
<input type="file" accept="image/*" onchange="compressImage(event);">
<script>
    function compressImage (event) {
        const file = event.target.files[0]
        const options = {
            maxSizeMB: 1,
            maxWidthOrHeight: 1024,
        }
        imageCompression(file, options)
            .then(output => uploadToServer(output))
            .catch(err => console.error(err))
    }

    function uploadToServer (file) {
        const formData = new FormData()
        formData.append('image', file, file.name)
        const url = 'http://localhost:3000/image-upload-api'
        console.log('calling api', url, 'with data', Array.from(formData.entries())[0])
        return fetch(url, {
            method: 'POST',
            body: formData
        })
            .then(res => res.json())
            .then(body => console.log('got server response', body))
    }
</script>

If you prefer standard Promise syntax, you can use .then() to handle the successful compression and .catch() to handle errors.

function handleImageUpload(event) {

  var imageFile = event.target.files[0];
  console.log('originalFile instanceof Blob', imageFile instanceof Blob); // true
  console.log(`originalFile size ${imageFile.size / 1024 / 1024} MB`);

  var options = {
    maxSizeMB: 1,
    maxWidthOrHeight: 1920,
    useWebWorker: true
  }
  imageCompression(imageFile, options)
    .then(function (compressedFile) {
      console.log('compressedFile instanceof Blob', compressedFile instanceof Blob); // true
      console.log(`compressedFile size ${compressedFile.size / 1024 / 1024} MB`); // smaller than maxSizeMB

      return uploadToServer(compressedFile); // write your own logic
    })
    .catch(function (error) {
      console.log(error.message);
    });
}

The imageCompression function accepts a File and an Options object. You must provide at least one of maxSizeMB or maxWidthOrHeight for compression to occur.

Options Reference

// you should provide one of maxSizeMB, maxWidthOrHeight in the options
const options: Options = {
  maxSizeMB: 1,
  maxWidthOrHeight: 1920,
  useWebWorker: true,
  // ... other options
}

imageCompression(file: File, options: Options): Promise<File>

The Options object allows you to fine-tune the compression process.

The library exports several helper functions for advanced image manipulation tasks. Most users will only need the main imageCompression function.

imageCompression.getDataUrlFromFile(file: File): Promise<base64 encoded string>
imageCompression.getFilefromDataUrl(dataUrl: string, filename: string, lastModified?: number): Promise<File>
imageCompression.loadImage(url: string): Promise<HTMLImageElement>
imageCompression.drawImageInCanvas(img: HTMLImageElement, fileType?: string): HTMLCanvasElement | OffscreenCanvas
imageCompression.drawFileInCanvas(file: File, options?: Options): Promise<[ImageBitmap | HTMLImageElement, HTMLCanvasElement | OffscreenCanvas]>
imageCompression.canvasToFile(canvas: HTMLCanvasElement | OffscreenCanvas, fileType: string, fileName: string, fileLastModified: number, quality?: number): Promise<File>
imageCompression.getExifOrientation(file: File): Promise<number>
imageCompression.copyExifWithoutOrientation(copyExifFromFile: File, copyExifToFile: File): Promise<File>

The imageCompression namespace provides several utility functions for working with files, data URLs, and canvas elements:

• getDataUrlFromFile(file: File): Promise<string>: Converts a File to a Data URL.
• getFilefromDataUrl(dataUrl: string, filename: string, lastModified?: number): Promise<File>: Converts a Data URL back into a File.
• loadImage(src: string): Promise<HTMLImageElement>: Loads an image source into an HTMLImageElement.
• drawImageInCanvas(img: HTMLImageElement, fileType?: string): HTMLCanvasElement: Draws an image into a canvas.
• drawFileInCanvas(file: File, options?: Options): Promise<[ImageBitmap | HTMLImageElement, HTMLCanvasElement]>: Draws a file into a canvas and returns the image and the canvas.
• canvasToFile(canvas: HTMLCanvasElement, fileType: string, fileName: string, fileLastModified: number, quality?: number): Promise<File>: Converts a canvas to a File.
• getExifOrientation(file: File): Promise<number>: Retrieves the EXIF orientation from a file.