v8.82.6

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.

<!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>

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.