This is the archived documentation for Doka Image Editor v7.

Please visit pqina.nl/pintura/docs/ to see documentation for the latest version of Pintura Image Editor.

Filter

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 Doka 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: any) => locale.labelDefault]]],
    [
        'Classic',
        [
            ['chrome', (locale: any) => locale.filterLabelChrome],
            ['fade', (locale: any) => locale.filterLabelFade],
            ['pastel', (locale: any) => locale.filterLabelPastel],
            ['cold', (locale: any) => locale.filterLabelCold],
            ['warm', (locale: any) => locale.filterLabelWarm],
        ],
    ],
    [
        'Monochrome',
        [
            ['monoDefault', (locale: any) => locale.filterLabelMonoDefault],
            ['monoNoir', (locale: any) => locale.filterLabelMonoNoir],
            ['monoWash', (locale: any) => locale.filterLabelMonoWash],
            ['monoStark', (locale: any) => locale.filterLabelMonoStark],
        ],
    ],
    [
        'Sepia',
        [
            ['sepiaDefault', (locale: any) => locale.filterLabelSepiaDefault],
            ['sepiaRust', (locale: any) => locale.filterLabelSepiaRust],
            ['sepiaBlues', (locale: any) => locale.filterLabelSepiaBlues],
            ['sepiaColor', (locale: any) => locale.filterLabelSepiaColor],
        ],
    ],
];