make-this-image-responsive

Simple image conversion tool, to help create responsive images using the browser `canvas`

workrs only within the browser

📜 make-this-image-responsive

Install

pnpm add make-this-image-responsive

Usage

// this lib was made to work with web workers
let worker = new Worker(new URL('make-this-image-responsive', import.meta.url));

// sending `cancel: true` makes sure that previous pending processing
// is canceled before sending new images to the processing 
// queue
worker.postMessage({
    cancel: true
});

worker.onmessage = (e) => {
    let { meta, blob } = e.data;
    // the `blob` is the responsive image post-processed
};

// `file` has to be one of HTMLImageElement
// SVGImageElement
// HTMLVideoElement
// HTMLCanvasElement
// Blob
// ImageData
// ImageBitmap
// OffscreenCanvas
// VideoFrame
let imgBitmap = await createImageBitmap(file)

let convArgs = {
    img: imgBitmap,
    meta: {
        id: 'id',
        start: Date.now(),
        size: file.size,
    },
    blur: 0,
    overlays: [
        {
            img: overlay,
            height: 0.1,
            width: 0.1,
            position: 'bottom-right'
        }
    ],
    maxSize: 720,
    keepAspectRatio: true,
    format: 'webp',
    quality: 95
};

worker.postMessage(convArgs);

Try it out

All image processing occurs locally in the browser, no server calls are made