picsquish - modern image resizer for browser

demo

Rewrite of pica

This project aims to be a modern rewrite of pica featuring:

• all ESM
• all TypeScript
• easy to follow code
• improved performance

Purpose

This project is aimed for resizing images within the browser so that no external service is needed. The resize result from this project is an improvement on the result that would be given from the browser's Canvas API, for it features more detail, less artifacts/pixelation, and the computation is offloaded from the main thread.

Usage Examples

import { squish, type Options as SquishOptions } from 'picsquish'

// you can get a single resized image with one input image
const single = await squish(inputImage, 400)
const resizedBlob = await single.toBlob()

// you can get multiple resized images with one input image
const multi = squish(inputImage, [400, 600, 800])
multi.forEach(p => p.then(r => r.toBlob()))

// you can override the default configuration by specifying your own options
const options: SquishOptions = { maxWorkerIdleTime: 1000, maxWorkerPoolSize: 6 }
const custom = await squish(inputImage, 400, options)

API

The API is open for suggestions for 1.0.0 release

// result can be a single Promise<SquishResult> or an array of them (depending on dimensionLimits)
const result = squish(image, dimensionLimits, options)

• image - can be a Blob or ImageBitmap
• dimensionLimits - can be a single input or an array specifying the dimension limit(s) for each resized image
• options - options are not required and defaults are provided for those not specified
  • useMainThread - if (for some reason) you want to resize on the main thread and not use web workers
  • maxWorkerPoolSize - the max amount of web workers to allocate for resizing
  • maxWorkerIdleTime - the max amount of idle time before web workers terminate
  • tileSize - the target width and height of each tile for processing
  • filter - box | hamming | lanczos2 | lanczos3 | mks2013
  • unsharpAmount - (from pica): >=0. Default = 0 (off). Usually value between 100 to 200 is good. Note, mks2013 filter already does optimal sharpening.
  • unsharpRadius - (from pica): 0.5..2.0. Radius of Gaussian blur. If it is less than 0.5, Unsharp Mask is off. Big values are clamped to 2.0.
  • unsharpThreshold - (from pica): 0..255. Default = 0. Threshold for applying unsharp mask.

For more context regarding options and intention you can refer to pica

• SquishResult - the result the squish promise resolves to
  • raw - result Uint8ClampedArray<ArrayBuffer>
  • width - result width number
  • height - result height number
  • toImageData - turns result into ImageData
  • toImageBitmap - turns result into ImageBitmap
  • toCanvas - turns result into HTMLCanvasElement
  • toBlob - turns result into Blob

Local Development

To develop locally you only need bun

bun install
bun run build
bun run demo

Firefox Bug

There is a bug in Firefox regarding createImageBitmap() that causes images to be decoded on the main thread (this is blocking and causes visual stutters). This affects both pica and picsquish.