Effortlessly convert, resize, and compress images (jpg, png, heic, heif, webp) into optimized png and jpg formats, all within the browser environment.
https://namti.github.io/image-resizor
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));new ImageResizor(file[, { ...options }])File | Blob| 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" |
Converts the image into a data URL.
instance.toDataURL(): string | undefinedConverts the image into a Blob.
instance.toBlob(): Promise<Blob>enum ImageType {
jpg = 'image/jpeg',
jpeg = 'image/jpeg',
png = 'image/png',
heic = 'image/heic',
heif = 'image/heif',
webp = 'image/webp',
}
static getSupportedTypes(): typeof ImageType 
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent