glFilters - v0.12.0
    Preparing search index...

    Class GLFilters

    Chainable filter chain. Collects filters, then applies them as sequential GPU shader passes.

    const result = glFilters(gl)
      .addFilter(brightness({ amount: 20 }))
      .addFilter(saturate({ factor: 1.5 }))
      .addFilter(blur())
      .apply(sourceImage);
    Index

    Constructors

    constructor

    Methods

    addFilter apply applyAsync applyToCanvas applyToCanvasAsync compile debug getFilters

    Constructors

    Methods

    • Append a filter to the chain. Returns this for chaining.

      Parameters

      Returns this

    • Apply filters and draw the result into an existing canvas.

      Parameters

      Returns HTMLCanvasElement

    • Load URL inputs if needed, apply filters, and draw the result into an existing canvas.

      Parameters

      • input: string | ImageSource
      • targetCanvas: HTMLCanvasElement

      Returns Promise<HTMLCanvasElement>

    • Compile the filter chain for efficient reuse. Returns a CompiledFilter that caches shader programs.

      Returns CompiledFilter

      const filter = glFilters()
        .addFilter(brightness({ amount: 0.1 }))
        .compile();

      // Reuse for multiple images
      const r1 = filter.apply(image1);
      const r2 = filter.apply(image2);

      // Or apply to a video element
      const canvas = filter.apply(videoElement);
      document.body.appendChild(canvas);

      filter.dispose();

    • Generate a self-contained debug HTML page that visualizes each filter step. Logs a data URI to the console that can be opened in a browser.

      Parameters

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Methods