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],
        ],
    ],
];