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 property to either a custom blurring function or to the return value of 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.

index.html

<!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,
        processDefaultImage,
        processImage,
    } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        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;
            },
        },
    });
</script>

App.jsx
App.css

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 (
        <div className="App">
            <PinturaEditor {...editorDefaults} src={'image.jpeg'} />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor v-bind="editorDefaults" src="image.jpeg" />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import {
    processDefaultImage,
    processImage,
    getEditorDefaults,
} from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            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;
                    },
                },
            }),
        };
    },

    methods: {},
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

.pintura-editor {
    height: 600px;
}
</style>

App.svelte

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import {
        processDefaultImage,
        processImage,
        getEditorDefaults,
    } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let 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;
            },
        },
    });
</script>

<div>
    <PinturaEditor {...editorDefaults} src={'image.jpeg'} />
</div>

<style>
    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

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;
            },
        },
    });
}

<pintura-editor [options]="editorDefaults" src="image.jpeg"></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 {}

index.html

<!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 { processDefaultImage, processImage } = $.fn.pintura;

        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            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;
                },
            },
        });
    });
</script>

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.