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.

import { openDefaultEditor } from './pintura.js';

openDefaultEditor({
    src: './my-image.jpeg',

    stickers: ['🎉', '😄', '👍', '👎', '🍕'],
});

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.

import { openDefaultEditor } from './pintura.js';

openDefaultEditor({
    src: './my-image.jpeg',

    stickers: [
        './images/logo.png',
        './stickers/one.svg',
        './stickers/two.svg',
        './stickers/three.svg',
    ],
});

Configuration object

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

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

openDefaultEditor({
    src: './my-image.jpeg',

    stickers: [
        {
            src: './stickers/one.svg',
            width: 100,
            height: 100,
            alt: 'Number one',
        },
    ],
});

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.

import { openDefaultEditor } from './pintura.js';

const onMountSticker = (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
        },
    };
};

openDefaultEditor({
    src: './my-image.jpeg',

    stickers: [
        {
            src: './stickers/one.svg',
            width: 100,
            height: 100,
            alt: 'Number one',
            mount: onMountSticker,
        },
    ],
});

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

import { openDefaultEditor } from './pintura.js';

openDefaultEditor({
    src: './my-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 aspect ratio
        {
            thumb: './stickers/logo.png', // can also be an Emoji
            alt: 'Firefox logo',
            shape: {
                // a shape description, position will be set by the editor
                width: 100,
                height: 100,
                aspectRatio: 1,
                backgroundImage: './stickers/logo-high-resolution.png',
            },
        },
    ],
});

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

openDefaultEditor({
    src: './my-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,
            },
        ],
    ],
});