v8.77.0

How to define sticker presets

Stickers can be used in the Annotate, Decorate, and the Sticker plugins.

Creating stickers

We can set up stickers with 3 different methods.

Emoji

This is the easiest way we can define a sticker.

The size of the emoji will automatically be set to '10%' width of the parent context (image size or crop rectangle) and the aspectRatio of the Emoji is automatically set so the sticker can't be skewed.

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

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        stickers: ['🎉', '😄', '👍', '👎', '🍕'],
    });
</script>

Image URL

Using an image URL as a sticker the editor will automatically use the width and height of the image as the initial size.

The aspectRatio of the sticker will be locked to the image aspect ratio.

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

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        stickers: [
            './images/logo.png',
            './stickers/one.svg',
            './stickers/two.svg',
            './stickers/three.svg',
        ],
    });
</script>

Configuration object

A third option to define a sticker is to use the sticker configuration object.

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

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        stickers: [
            {
                src: './stickers/one.svg',
                width: 100,
                height: 100,
                alt: 'Number one',
            },
            /* more stickers here */
        ],
    });
</script>

The sticker configuration object supports the following properties.

Property Description
src Either an image URL or an Emoji. Used for the sticker thumbnail if thumb is not supplied. If shape is not supplied will automatically use as backgroundImage of shape.
thumb The image to use for the sticker thumbnail. If not supplied will use src. Can be an image URL, an Emoji, or an SVG.
width The width of the sticker in pixels or percentage.
height The height of the sticker in pixels or percentage.
alt The alt text to use on the sticker thumbnail. If not supplied will automatically derive an alt text from the src or thumb value.
disabled When set to true the sticker cannot be used.
shape The shape to use when adding the sticker.
mount Set to a function, this will allow updating the HTML of the sticker thumbnail.

Altering the sticker thumbnail

The mount property enables us to update the HTML of the sticker thumbnail. It receives the sticker thumbnail element and the sticker configuration object.

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

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        stickers: [
            {
                src: './stickers/one.svg',
                width: 100,
                height: 100,
                alt: 'Number one',
                mount: (element, sticker) => {
                    // runs when the sticker thumbnail `element' is added
                    return {
                        update: (sticker) => {
                            // runs when the `sticker` parameter is updated
                        },
                        destroy: () => {
                            // runs when the sticker thumbnail `element` is removed
                        },
                    };
                },
            },
            /* more stickers here */
        ],
    });
</script>

Instead of having the editor handle generating the sticker shape we can define the sticker shape ourselves by setting the shape property.

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

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        stickers: [
            // Advanced Sticker configuration
            // - `thumb` is used as the thumbnail for the sticker list
            // - `backgroundImage` is used for the sticker
            // - The editor will use the shape `width`, `height`, and `aspectRatio`
            {
                thumb: './stickers/logo.png', // can also be an Emoji
                alt: 'Firefox logo',
                shape: {
                    // a shape definition, the position of the sthape will be set by the editor
                    width: 100,
                    height: 100,
                    aspectRatio: 1,
                    backgroundImage: './stickers/logo-high-resolution.png',
                },
            },
        ],
    });
</script>

Grouping stickers

Stickers can be grouped. When grouping stickers the editor will automatically render tabs for each sticker group.

The following options can be supplied to a group

Property Description
disabled Disable an entire group of stickers and their tab.
icon An SVG icon to render in the group tab.
hideLabel Hides the group tab label.
<!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 } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        stickers: [
            [
                // required group label
                'Numbers',

                // group stickers, can be an empty array
                ['one.svg', 'two.svg', 'three.svg'],

                // optional group properties
                {},
            ],
            [
                // group label
                'Emoji',

                // group stickers
                ['🎉', '😄', '👍', '👎', '🍕'],

                // group properties
                {
                    // a group icon
                    icon: '<g><!-- SVG here --></g>',

                    // hide the group label
                    hideLabel: true,

                    // disable the group
                    disabled: true,
                },
            ],
        ],
    });
</script>