Apply a CSS filter to the capture.
Applies CSS filter effects to the clone, overriding authored filters. preset takes precedence over filter; an unknown preset logs a warning and filter applies.
npm install @zumer/snapdom@latest @zumer/snapdom-plugins@latestUsage
import { snapdom } from '@zumer/snapdom';
import { filter } from '@zumer/snapdom-plugins/filter';
const el = document.querySelector('#target');
const result = await snapdom(el, { plugins: [filter({ preset: 'grayscale' })] });
const image = await result.toPng();
document.body.append(image);Options
| Option | Type | Default | Description |
|---|---|---|---|
preset | string | none | 'grayscale' | 'sepia' | 'blur' | 'invert' | 'vintage' | 'dramatic' |
filter | string | '' | Raw CSS filter string, e.g. 'blur(2px) contrast(1.2)' |