# 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](#filterfunctions) | undefined | An object with color matrices describing the various filters shown in the filter menu. | | [filterOptions](#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](#filteroptions) array, that's how Pintura Image Editor determines which control to render for each button. * [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-2) * [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-2) * [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-2) * [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-2) * [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-2) * [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-2) * [index.html](#index-html-panel-2) `
` * [App.jsx](#App-jsx-panel-2) * [App.css](#App-css-panel-2) `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 (
{ // 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']]], ]} />
); } export default App; ` ```css .pintura-editor { height: 600px; } ``` * [App.vue](#App-vue-panel-2) ` ` * [App.svelte](#App-svelte-panel-2) `
{ // 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']]], ]} />
` * [app.component.ts](#app-component-ts-panel-2) * [app.component.html](#app-component-html-panel-2) * [app.component.css](#app-component-css-panel-2) * [app.module.ts](#app-module-ts-panel-2) `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']]], ]; } ` ` ` ```css ::ng-deep .pintura-editor { height: 600px; } ``` ```javascript 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 {} ``` * [index.html](#index-html-panel-2) `
` 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. * [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-3) * [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-3) * [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-3) * [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-3) * [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-3) * [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-3) * [index.html](#index-html-panel-3) `
` * [App.jsx](#App-jsx-panel-3) * [App.css](#App-css-panel-3) `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 (
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, ], ], ], ]} />
); } export default App; ` ```css .pintura-editor { height: 600px; } ``` * [App.vue](#App-vue-panel-3) ` ` * [App.svelte](#App-svelte-panel-3) `
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], ], ], ]} />
` * [app.component.ts](#app-component-ts-panel-3) * [app.component.html](#app-component-html-panel-3) * [app.component.css](#app-component-css-panel-3) * [app.module.ts](#app-module-ts-panel-3) `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], ], ], ]; } ` ` ` ```css ::ng-deep .pintura-editor { height: 600px; } ``` ```javascript 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 {} ``` * [index.html](#index-html-panel-3) `
` ### 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. |