# Redact plugin Use the Redact plugin to enable easy and secure censoring of information It currently has no specific UI properties. Please make sure to set the [imageScrambler](../../image-editor/properties/#imagescrambler) property to either a custom blurring function or to the return value of [createDefaultImageScrambler()](../../image-editor/exports/#createdefaultimagescrambler). ## Applying redaction to the source image By default redactions are only applied to the output image. If we're also uploading the source image we need to redact it as well, otherwise censored information would still arrive on our server. We can use the `preprocessImageSource` and `preprocessImageState` hooks to achieve this. * [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-0) * [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-0) * [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-0) * [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-0) * [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-0) * [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-0) * [index.html](#index-html-panel-0) `
` * [App.jsx](#App-jsx-panel-0) * [App.css](#App-css-panel-0) `import '@pqina/pintura/pintura.css'; import './App.css'; import { PinturaEditor } from '@pqina/react-pintura'; import { processDefaultImage, processImage, getEditorDefaults, } from '@pqina/pintura'; const editorDefaults = getEditorDefaults({ imageWriter: { // apply redaction to source image preprocessImageSource: async (src, options, onprogress, state) => { const { dest } = await processDefaultImage(src, { imageRedaction: [...state.redaction], }); return dest; }, // remove redaction from state preprocessImageState: (imageState) => { imageState.redaction = []; return imageState; }, }, }); function App() { return (
); } export default App; ` ```css .pintura-editor { height: 600px; } ``` * [App.vue](#App-vue-panel-0) ` ` * [App.svelte](#App-svelte-panel-0) `
` * [app.component.ts](#app-component-ts-panel-0) * [app.component.html](#app-component-html-panel-0) * [app.component.css](#app-component-css-panel-0) * [app.module.ts](#app-module-ts-panel-0) `import { Component } from '@angular/core'; import { processDefaultImage, processImage, getEditorDefaults, } from '@pqina/pintura'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { editorDefaults: any = getEditorDefaults({ imageWriter: { // apply redaction to source image preprocessImageSource: async (src, options, onprogress, state) => { const { dest } = await processDefaultImage(src, { imageRedaction: [...state.redaction], }); return dest; }, // remove redaction from state preprocessImageState: (imageState) => { imageState.redaction = []; return imageState; }, }, }); } ` ```html ``` ```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-0) `
` ### Redact plugin exports The core editor module exports the following Redact plugin objects. | Export | Description | | ------------------------------ | ------------------------ | | plugin\_redact | The redact util view. | | plugin\_redact\_locale\_en\_gb | The redact util locales. |