ImageBitmapTransform

Automatically orient, crop, resize, and compress images. Use with MediaResolutionValidator to filter out and optimise unwanted images before upload.

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

Image target width, defaults to undefined

width?: number

height

Image target height, defaults to undefined

height?: number

fit

How to fit image in target size bounds, defaults to 'contain'

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

upscale

Should we upscale images, defaults to false

upscale?: boolean

aspectRatio

Output aspect ratio, defaults to input image aspect ratio

aspectRatio?: number

type

Output format type, defaults to input image type, some example types are 'image/jpeg', 'image/wepb', and 'image/png', limited to what the canvas toBlob method can output for the current browser

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

workersURL

Where the extension can find the WebWorker to use

workersURL?: URL

actionTransform

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

actionTransform?: string