Fill plugin

Use the Fill plugin to fill the background of transparent images with colors or images

Property	Default value	Description
`fillOptions`	`undefined`	A list of colors and images to use as fill options.

fillOptions

An array of colors and images to render below the image.

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,
        createDefaultColorOptions,
        colorStringToColorArray,
    } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        fillOptions: [
            // Transparent default value
            [0, 0, 0, 0],

            // Red
            [1, 0, 0, 1],

            // Using the default markup editor colors
            ...Object.values(createDefaultColorOptions()),

            // Transparent Purple as CSS color using colorStringToColorArray
            colorStringToColorArray('rgba(0, 0, 255, .5)'),

            // Using a PNG as background image
            'mesh-gradient-01.png',
        ],
    });
</script>

App.jsx
App.css

import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import {
    getEditorDefaults,
    createDefaultColorOptions,
    colorStringToColorArray,
} from '@pqina/pintura';

const editorDefaults = getEditorDefaults();

function App() {
    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                fillOptions={[
                    // Transparent default value
                    [0, 0, 0, 0],

                    // Red
                    [1, 0, 0, 1],

                    // Using the default markup editor colors
                    ...Object.values(createDefaultColorOptions()),

                    // Transparent Purple as CSS color using colorStringToColorArray
                    colorStringToColorArray('rgba(0, 0, 255, .5)'),

                    // Using a PNG as background image
                    'mesh-gradient-01.png',
                ]}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

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

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),

            fillOptions: [
                // Transparent default value
                [0, 0, 0, 0],

                // Red
                [1, 0, 0, 1],

                // Using the default markup editor colors
                ...Object.values(createDefaultColorOptions()),

                // Transparent Purple as CSS color using colorStringToColorArray
                colorStringToColorArray('rgba(0, 0, 255, .5)'),

                // Using a PNG as background image
                'mesh-gradient-01.png',
            ],
        };
    },

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

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

App.svelte

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

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        fillOptions={[
            // Transparent default value
            [0, 0, 0, 0],

            // Red
            [1, 0, 0, 1],

            // Using the default markup editor colors
            ...Object.values(createDefaultColorOptions()),

            // Transparent Purple as CSS color using colorStringToColorArray
            colorStringToColorArray('rgba(0, 0, 255, .5)'),

            // Using a PNG as background image
            'mesh-gradient-01.png',
        ]}
    />
</div>

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

import { Component } from '@angular/core';

import {
    getEditorDefaults,
    createDefaultColorOptions,
    colorStringToColorArray,
} from '@pqina/pintura';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    editorDefaults: any = getEditorDefaults();

    fillOptions: any = [
        // Transparent default value
        [0, 0, 0, 0],

        // Red
        [1, 0, 0, 1],

        // Using the default markup editor colors
        ...Object.values(createDefaultColorOptions()),

        // Transparent Purple as CSS color using colorStringToColorArray
        colorStringToColorArray('rgba(0, 0, 255, .5)'),

        // Using a PNG as background image
        'mesh-gradient-01.png',
    ];
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    [fillOptions]="fillOptions"
></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 { createDefaultColorOptions, colorStringToColorArray } =
            $.fn.pintura;

        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            fillOptions: [
                // Transparent default value
                [0, 0, 0, 0],

                // Red
                [1, 0, 0, 1],

                // Using the default markup editor colors
                ...Object.values(createDefaultColorOptions()),

                // Transparent Purple as CSS color using colorStringToColorArray
                colorStringToColorArray('rgba(0, 0, 255, .5)'),

                // Using a PNG as background image
                'mesh-gradient-01.png',
            ],
        });
    });
</script>

Fill plugin exports

The core editor module exports the following Fill plugin objects.

Export	Description
`plugin_fill`	The fill util view.
`plugin_fill_locale_en_gb`	The fill util locales.