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 |
|
An object with color matrices describing the various filters shown in the filter menu. |
filterOptions |
|
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.
JavaScript
React
Vue
Svelte
Angular
jQuery<!DOCTYPE html>
<head>
<link rel="stylesheet" href="./pintura.css" />
</head>
<style>
.pintura-editor {
height: 600px;
}
</style>
<div id="editor"></div>
<script type="module">
import {
appendDefaultEditor,
filterInvert,
plugin_filter,
plugin_filter_defaults,
} from './pintura.js';
const editor = appendDefaultEditor('#editor', {
src: 'image.jpeg',
filterFunctions: {
// the default filter functions
...plugin_filter_defaults.filterFunctions,
// add the invert filter (not included in plugin_filter_defaults.filterFunctions)
invert: filterInvert,
// add a custom filter
blue: () => {
// prettier-ignore
return [
0, 0, 0, 0, 0,
0, 0, 0, 0, 0,
1, 1, 1, 0, 0,
0, 0, 0, 1, 0
]
},
},
filterOptions: [
...plugin_filter_defaults.filterOptions,
['Custom', [['blue', 'Blue']]],
],
});
</script>
import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import {
getEditorDefaults,
filterInvert,
plugin_filter,
plugin_filter_defaults,
} from '@pqina/pintura';
const editorDefaults = getEditorDefaults();
function App() {
return (
<div className="App">
<PinturaEditor
{...editorDefaults}
src={'image.jpeg'}
filterFunctions={{
// the default filter functions
...plugin_filter_defaults.filterFunctions,
// add the invert filter (not included in plugin_filter_defaults.filterFunctions)
invert: filterInvert,
// add a custom filter
blue: () => {
// prettier-ignore
return [
0, 0, 0, 0, 0,
0, 0, 0, 0, 0,
1, 1, 1, 0, 0,
0, 0, 0, 1, 0
]
},
}}
filterOptions={[
...plugin_filter_defaults.filterOptions,
['Custom', [['blue', 'Blue']]],
]}
/>
</div>
);
}
export default App;
.pintura-editor {
height: 600px;
}
<template>
<div>
<PinturaEditor
v-bind="editorDefaults"
src="image.jpeg"
:filterFunctions="filterFunctions"
:filterOptions="filterOptions"
/>
</div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import {
getEditorDefaults,
filterInvert,
plugin_filter,
plugin_filter_defaults,
} from '@pqina/pintura';
export default {
name: 'App',
components: {
PinturaEditor,
},
data() {
return {
editorDefaults: getEditorDefaults(),
filterFunctions: {
// the default filter functions
...plugin_filter_defaults.filterFunctions,
// add the invert filter (not included in plugin_filter_defaults.filterFunctions)
invert: filterInvert,
// add a custom filter
blue: () => {
// prettier-ignore
return [
0, 0, 0, 0, 0,
0, 0, 0, 0, 0,
1, 1, 1, 0, 0,
0, 0, 0, 1, 0
]
},
},
filterOptions: [
...plugin_filter_defaults.filterOptions,
['Custom', [['blue', 'Blue']]],
],
};
},
methods: {},
};
</script>
<style>
@import '@pqina/pintura/pintura.css';
.pintura-editor {
height: 600px;
}
</style>
<script>
import { PinturaEditor } from '@pqina/svelte-pintura';
import {
getEditorDefaults,
filterInvert,
plugin_filter,
plugin_filter_defaults,
} from '@pqina/pintura';
import '@pqina/pintura/pintura.css';
let editorDefaults = getEditorDefaults();
</script>
<div>
<PinturaEditor
{...editorDefaults}
src={'image.jpeg'}
filterFunctions={{
// the default filter functions
...plugin_filter_defaults.filterFunctions,
// add the invert filter (not included in plugin_filter_defaults.filterFunctions)
invert: filterInvert,
// add a custom filter
blue: () => {
// prettier-ignore
return [
0, 0, 0, 0, 0,
0, 0, 0, 0, 0,
1, 1, 1, 0, 0,
0, 0, 0, 1, 0
]
},
}}
filterOptions={[
...plugin_filter_defaults.filterOptions,
['Custom', [['blue', 'Blue']]],
]}
/>
</div>
<style>
div :global(.pintura-editor) {
height: 600px;
}
</style>
import { Component } from '@angular/core';
import {
getEditorDefaults,
filterInvert,
plugin_filter,
plugin_filter_defaults,
} from '@pqina/pintura';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
editorDefaults: any = getEditorDefaults();
filterFunctions: any = {
// the default filter functions
...plugin_filter_defaults.filterFunctions,
// add the invert filter (not included in plugin_filter_defaults.filterFunctions)
invert: filterInvert,
// add a custom filter
blue: () => {
// prettier-ignore
return [
0, 0, 0, 0, 0,
0, 0, 0, 0, 0,
1, 1, 1, 0, 0,
0, 0, 0, 1, 0
]
},
};
filterOptions: any = [
...plugin_filter_defaults.filterOptions,
['Custom', [['blue', 'Blue']]],
];
}
<pintura-editor
[options]="editorDefaults"
src="image.jpeg"
[filterFunctions]="filterFunctions"
[filterOptions]="filterOptions"
></pintura-editor>
::ng-deep .pintura-editor {
height: 600px;
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AngularPinturaModule],
exports: [AppComponent],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="./pintura/pintura.css" />
</head>
<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>
<style>
.pintura-editor {
height: 600px;
}
</style>
<div id="editor"></div>
<script>
useEditorWithJQuery(jQuery, pintura);
$(function () {
var { filterInvert, plugin_filter, plugin_filter_defaults } =
$.fn.pintura;
var editor = $('#editor').pinturaDefault({
src: 'image.jpeg',
filterFunctions: {
// the default filter functions
...plugin_filter_defaults.filterFunctions,
// add the invert filter (not included in plugin_filter_defaults.filterFunctions)
invert: filterInvert,
// add a custom filter
blue: () => {
// prettier-ignore
return [
0, 0, 0, 0, 0,
0, 0, 0, 0, 0,
1, 1, 1, 0, 0,
0, 0, 0, 1, 0
]
},
},
filterOptions: [
...plugin_filter_defaults.filterOptions,
['Custom', [['blue', 'Blue']]],
],
});
});
</script>
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.
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="./pintura.css" />
</head>
<style>
.pintura-editor {
height: 600px;
}
</style>
<div id="editor"></div>
<script type="module">
import { appendDefaultEditor } from './pintura.js';
const editor = appendDefaultEditor('#editor', {
src: 'image.jpeg',
filterOptions: [
['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],
],
],
],
});
</script>
import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults } from '@pqina/pintura';
const editorDefaults = getEditorDefaults();
function App() {
return (
<div className="App">
<PinturaEditor
{...editorDefaults}
src={'image.jpeg'}
filterOptions={[
['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,
],
],
],
]}
/>
</div>
);
}
export default App;
.pintura-editor {
height: 600px;
}
<template>
<div>
<PinturaEditor
v-bind="editorDefaults"
src="image.jpeg"
:filterOptions="filterOptions"
/>
</div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { getEditorDefaults } from '@pqina/pintura';
export default {
name: 'App',
components: {
PinturaEditor,
},
data() {
return {
editorDefaults: getEditorDefaults(),
filterOptions: [
['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,
],
],
],
],
};
},
methods: {},
};
</script>
<style>
@import '@pqina/pintura/pintura.css';
.pintura-editor {
height: 600px;
}
</style>
<script>
import { PinturaEditor } from '@pqina/svelte-pintura';
import { getEditorDefaults } from '@pqina/pintura';
import '@pqina/pintura/pintura.css';
let editorDefaults = getEditorDefaults();
</script>
<div>
<PinturaEditor
{...editorDefaults}
src={'image.jpeg'}
filterOptions={[
['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],
],
],
]}
/>
</div>
<style>
div :global(.pintura-editor) {
height: 600px;
}
</style>
import { Component } from '@angular/core';
import { getEditorDefaults } from '@pqina/pintura';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
editorDefaults: any = getEditorDefaults();
filterOptions: any = [
['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],
],
],
];
}
<pintura-editor
[options]="editorDefaults"
src="image.jpeg"
[filterOptions]="filterOptions"
></pintura-editor>
::ng-deep .pintura-editor {
height: 600px;
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AngularPinturaModule],
exports: [AppComponent],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="./pintura/pintura.css" />
</head>
<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>
<style>
.pintura-editor {
height: 600px;
}
</style>
<div id="editor"></div>
<script>
useEditorWithJQuery(jQuery, pintura);
$(function () {
var editor = $('#editor').pinturaDefault({
src: 'image.jpeg',
filterOptions: [
['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,
],
],
],
],
});
});
</script>
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. |
