v8.41.3

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.

filterOptions

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.