image-resizor

Effortlessly convert, resize, and compress images (jpg, png, heic, heif, webp) into optimized png and jpg formats, all within the browser environment.

Demo

https://namti.github.io/image-resizor

Usage

import ImageResizor from 'image-resizor';

<script src="https://cdn.jsdelivr.net/npm/image-resizor/dist/image-resizor.iife.js"></script>

new ImageResizor(file, {
  maxWidth: 300,
  maxHeight: 300,
  outputType: 'image/jpeg',
  quality: .8,
})
  .init()
  .then(instance => console.log(instance.toDataURL()))
  .catch(e => console.error(e));

Arguments

new ImageResizor(file[, { ...options }])

file

File | Blob

options

| Key | Type | Default | Options | | --- | --- | --- | --- | | maxWidth | number | 2000 | | | maxHeight | number | 2000 | | | scale | number | 1 | 0.1~1 | | outputType | string | image/png | "image/png" | "image/jpeg" | | backgroundColor | string | #ffffff | Background fill for converting images with alpha channel to "image/jpeg" | | quality | number | 0.9 | 0.1~1 Available if the outputType is "image/jpeg" |

Methods

toDataURL()

Converts the image into a data URL.

instance.toDataURL(): string | undefined

toBlob()

Converts the image into a Blob.

instance.toBlob(): Promise<Blob>

getSupportedTypes()

enum ImageType {
  jpg = 'image/jpeg',
  jpeg = 'image/jpeg',
  png = 'image/png',
  heic = 'image/heic',
  heif = 'image/heif',
  webp = 'image/webp',
}
static getSupportedTypes(): typeof ImageType