Class: ImageProcessor

ImageProcessor(optionsopt)

ImageProcessor provides client-side image processing using the Canvas API. Handles resize, format selection (WebP with JPEG fallback), quality management, and byte-budget enforcement via iterative quality reduction.

Used by ImageCache for Numista CDN images and by the upload flow for user photos.

Constructor

new ImageProcessor(optionsopt)

Parameters:
Name Type Attributes Description
options Object <optional>
Properties
Name Type Attributes Default Description
maxDim number <optional>
 600

Max width/height in px
quality number <optional>
 0.75

Initial compression quality (0-1)
maxBytes number <optional>
 512000

Max output size in bytes
qualityStep number <optional>
 0.05

Quality reduction step when over budget
minQuality number <optional>
 0.30

Floor quality to avoid excessive degradation
Source:

Members

_webpSupported :boolean|null

Cached WebP support detection result

Type:
  • boolean | null
Source:

Methods

_canvasToBlob(canvas, format, quality) → {Promise.<(Blob|null)>}

Convert a canvas to a Blob with the given format and quality.

Parameters:
Name Type Description
canvas HTMLCanvasElement
format string

MIME type
quality number

0-1
Source:
Returns:
Type
Promise.<(Blob|null)>

(async) _processSource(source, opts) → {Promise.<({blob: Blob, width: number, height: number, originalSize: number, compressedSize: number, format: string}|null)>}

Core processing pipeline: resize → compress → enforce byte budget.

Parameters:
Name Type Description
source ImageBitmap | HTMLImageElement
opts Object
Source:
Returns:
Type
Promise.<({blob: Blob, width: number, height: number, originalSize: number, compressedSize: number, format: string}|null)>

createPreview(blob) → {string|null}

Create an object URL preview from a Blob. Caller must revoke.

Parameters:
Name Type Description
blob Blob
Source:
Returns:

Object URL or null

Type
string | null

estimateStorage(blob) → {number}

Estimate storage bytes for a blob (actual blob.size).

Parameters:
Name Type Description
blob Blob
Source:
Returns:
Type
number

(async) processFile(file, optsopt) → {Promise.<({blob: Blob, width: number, height: number, originalSize: number, compressedSize: number, format: string}|null)>}

Process a File or Blob into a compressed, resized image.

Parameters:
Name Type Attributes Description
file File | Blob

Input image file
opts Object <optional>

Override options for this call

Properties
Name Type Attributes Description
maxDim number <optional>

Override max dimension
quality number <optional>

Override quality
maxBytes number <optional>

Override max bytes
Source:
Returns:
Type
Promise.<({blob: Blob, width: number, height: number, originalSize: number, compressedSize: number, format: string}|null)>

(async) processFromUrl(url, optsopt) → {Promise.<({blob: Blob, width: number, height: number, originalSize: number, compressedSize: number, format: string}|null)>}

Process an image from a URL into a compressed, resized blob.

Parameters:
Name Type Attributes Description
url string

Image URL to fetch and process
opts Object <optional>

Override options
Source:
Returns:
Type
Promise.<({blob: Blob, width: number, height: number, originalSize: number, compressedSize: number, format: string}|null)>

(async) supportsWebP() → {Promise.<boolean>}

Detect whether the browser supports WebP encoding via Canvas. Result is cached after first call.

Source:
Returns:
Type
Promise.<boolean>