Fabric.js Document Engine

搜索文档

查找页面或章节

EN

滤镜 API

查看 Markdown

fabricjs-document-engine/filters 里的全部内容。

Worker 怎样运行滤镜、哪些浏览器会使用它,见图片滤镜指南。

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

createFilterWorker 配置项

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.

流水线

runFilterPipeline 就是 Worker 运行的内容。它也可以在主线程上处理任意 ImageData,用在你自己的工具里。

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 和 WORKER_FILTERS 分别列出按行分块运行的滤镜类型,以及 Worker 能运行的所有类型。其他滤镜会让 apply 使用 Fabric 的 applyFilters,不论 createFilterWorker 配置项怎样设置。

createFilterWorker 配置项 | Fabric.js Document Engine