ImageBitmapTransform

Automatically crop, resize, and compress images.

import { defineFilePond } from 'filepond';
import { locale } from 'filepond/locales/en-gb.js';
import { ImageBitmapTransform } from 'filepond/extensions/image-bitmap-transform.js';

defineFilePond({
    locale,
    extensions: [
        // Add the ImageBitmapTransform extension
        [ImageBitmapTransform, {
            // Resize all images to fit a 512 by 512 bounding box
            width: 512,
            height: 512,

            // Images should be contained in the above bounding box
            fit: 'contain',
            
            // Crop all images to a square
            aspectRatio: 1
        }]
    ]
})

Configuration

The ImageBitmapTransform extension accepts an option object of type ImageBitmapTransformOptions which defines the properties below.

width

Target width, defaults to undefined

width?: number

height

Target height, defaults to undefined

height?: number

fit

How to fit image if different aspect ratio, defaults to 'contain'

fit?: "cover" | "contain" | "force"

upscale

Should we upscale smaller images, defaults to false

upscale?: boolean

aspectRatio

Output aspect ratio, defaults to input aspect ratio

aspectRatio?: number

type

Output type, defaults to input file type

type?: string

quality

Resize quality. Defaults to 'medium'

quality?: "pixelated" | "low" | "medium" | "high"

compression

Compression quality. Value between 0 and 1, defaults to .98, only applies to JPEG and WEBP output

compression?: number

actionTransform

Action name to use for rename. Defaults to 'transformImage'

actionTransform?: string