Filter plugin

The Filter plugin enables applying color matrix filters to the preview image.

We can import the default filter set or define our own filters.

Property	Default value	Description
`filterFunctions`	`undefined`	An object with color matrices describing the various filters shown in the filter menu.
`filterOptions`	`undefined`	A list of key label pairs describing which finetune controls to render.

filterFunctions

An object with color matrices describing the various filters shown in the filter menu.

The key pastel matches the pastel key used in the filterOptions array, that's how Pintura Image Editor determines which control to render for each button.

{
    pastel = () =>
        // prettier-ignore
        [
        0.75, 0.25, 0.25, 0, 0,
        0.25, 0.75, 0.25, 0, 0,
        0.25, 0.25, 0.75, 0, 0,
        0,    0,    0,    1, 0
    ];
}

The utility below helps us generate our own photo filters.

Drop an image file on the picture to load a different image.
Hold Shift to select multiple fields at once clicking or dragging.
Click "copy" to copy the current Color Matrix to your clipboard.

A list of key label pairs describing which finetune controls to render. Label can be a string but in most cases is a function, the function is then passed the current locale and can select the correct locale key.

[
    ['Default', [[undefined, (locale) => locale.labelDefault]]],
    [
        'Classic',
        [
            ['chrome', (locale) => locale.filterLabelChrome],
            ['fade', (locale) => locale.filterLabelFade],
            ['pastel', (locale) => locale.filterLabelPastel],
            ['cold', (locale) => locale.filterLabelCold],
            ['warm', (locale) => locale.filterLabelWarm],
        ],
    ],
    [
        'Monochrome',
        [
            ['monoDefault', (locale) => locale.filterLabelMonoDefault],
            ['monoNoir', (locale) => locale.filterLabelMonoNoir],
            ['monoWash', (locale) => locale.filterLabelMonoWash],
            ['monoStark', (locale) => locale.filterLabelMonoStark],
        ],
    ],
    [
        'Sepia',
        [
            ['sepiaDefault', (locale) => locale.filterLabelSepiaDefault],
            ['sepiaRust', (locale) => locale.filterLabelSepiaRust],
            ['sepiaBlues', (locale) => locale.filterLabelSepiaBlues],
            ['sepiaColor', (locale) => locale.filterLabelSepiaColor],
        ],
    ],
];

Filter plugin exports

The core editor module exports the following Filter plugin objects.

Export	Description
`plugin_filter`	The filter util view.
`plugin_filter_defaults`	A default filter util configuration object exposing a selection of the filters below.
`plugin_filter_locale_en_gb`	The filter util locales.
`filterPastel`	The Pastel filter.
`filterChrome`	The Chrome filter.
`filterFade`	The Fade filter.
`filterWarm`	The Warm filter.
`filterCold`	The Cold filter.
`filterInvert`	The Invert filter.
`filterMonoDefault`	The Mono default filter.
`filterMonoNoir`	The Mono Noir filter.
`filterMonoWash`	The Mono Wash filter.
`filterMonoStark`	The Mono Stark filter.
`filterSepiaDefault`	The Sepia default filter.
`filterSepiaBlues`	The Sepia Blues filter.
`filterSepiaRust`	The Sepia Rust filter.
`filterSepiaColor`	The Sepia Color filter.