Fabric.js Document Engine

Search documentation

Find a page or section

中文

Filters API

View as Markdown

Everything in fabricjs-document-engine/filters.

How the worker runs filters, and which browsers use it, is in the image filters guide.

import {
  canRunInWorker,
  createFilterWorker,
  runFilterPipeline,
} from "fabricjs-document-engine/filters";

createFilterWorker options

function createFilterWorker(options?: FilterWorkerOptions): FilterWorker

Runs Fabric image filters in a Web Worker, with progress, cancel and newest-run-wins.

NameTypeDefaultDescription
createWorker() => Workerthe shipped workerMakes a worker, for bundlers that need their own worker setup.
workerbooleantruefalse runs filters in steps on the main thread instead.
poolSizenumber1Workers to run at once.
bandRowsnumber64Rows per step for pixel filters.
engineDocumentEnginenoneRecords each finished run as one undo step and drops runs that finish after another document opened.

FilterWorker

NameTypeDefaultDescription
apply*(image: FabricImage, filters?: ImageFilter[], options?: ApplyFilterOptions): Promise<boolean>—Applies filters to an image. Resolves true when it changed, false when a newer run replaced it. Rejects with the signal's reason when aborted.
mode*"worker" | "main-thread"—worker or main-thread.
terminate*(): void—Stops the workers. Runs still going resolve false.
NameTypeDefaultDescription
signalAbortSignalnoneCancels the run; the image is left as it was.
onProgress(done: number) => voidnoneCalled with the share done, from 0 to 1.

The pipeline

runFilterPipeline is what the worker runs. It also works on the main thread with any ImageData, for your own tools.

function runFilterPipeline(filters: readonly PipelineFilter[], state: PipelineState, options?: PipelineOptions): Promise<ImageData | undefined>

Runs filters on ImageData in steps, with progress and cancel.

function canRunInWorker(filters: ReadonlyArray<{ type?: unknown; subFilters?: unknown[]; }>): boolean

True when every filter, inside Composed ones too, can run in a worker.

NameTypeDefaultDescription
bandRowsnumber64Rows per step for pixel filters.
onProgress(done: number) => voidnoneCalled after each step with the share done.
isCancelled() => booleannoneChecked after each step; true stops the run.
pause() => Promise<void>noneLets other work run between steps.

PIXEL_FILTERS and WORKER_FILTERS list the filter types run in bands of rows, and every type a worker can run. Any other filter makes apply use Fabric's applyFilters, whatever the createFilterWorker options say.

createFilterWorker options | Fabric.js Document Engine