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
Image URL
Configuration object
Programmatically

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.

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

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

App.jsx
App.css

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

const editorDefaults = getEditorDefaults();

function App() {
    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                stickers={['🎉', '😄', '👍', '👎', '🍕']}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

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

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

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

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

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

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

App.svelte

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

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        stickers={['🎉', '😄', '👍', '👎', '🍕']}
    />
</div>

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

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

import { getEditorDefaults } from '@pqina/pintura';

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

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

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    [stickers]="stickers"
></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 editor = $('#editor').pinturaDefault({
            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.

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

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

App.jsx
App.css

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

const editorDefaults = getEditorDefaults();

function App() {
    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                stickers={[
                    './images/logo.png',
                    './stickers/one.svg',
                    './stickers/two.svg',
                    './stickers/three.svg',
                ]}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

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

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

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

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

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

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

App.svelte

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

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        stickers={[
            './images/logo.png',
            './stickers/one.svg',
            './stickers/two.svg',
            './stickers/three.svg',
        ]}
    />
</div>

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

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

import { getEditorDefaults } from '@pqina/pintura';

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

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

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    [stickers]="stickers"
></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 editor = $('#editor').pinturaDefault({
            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.

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

App.jsx
App.css

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

const editorDefaults = getEditorDefaults();

function App() {
    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                stickers={[
                    {
                        src: './stickers/one.svg',
                        width: 100,
                        height: 100,
                        alt: 'Number one',
                    },
                    /* more stickers here */
                ]}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

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

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

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

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

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

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

App.svelte

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

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        stickers={[
            {
                src: './stickers/one.svg',
                width: 100,
                height: 100,
                alt: 'Number one',
            },
            /* more stickers here */
        ]}
    />
</div>

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

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

import { getEditorDefaults } from '@pqina/pintura';

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

    stickers: any = [
        {
            src: './stickers/one.svg',
            width: 100,
            height: 100,
            alt: 'Number one',
        },
        /* more stickers here */
    ];
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    [stickers]="stickers"
></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 editor = $('#editor').pinturaDefault({
            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.

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

App.jsx
App.css

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

const editorDefaults = getEditorDefaults();

function App() {
    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                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 */
                ]}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

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

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

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

            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 */
            ],
        };
    },

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

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

App.svelte

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

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        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 */
        ]}
    />
</div>

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

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

import { getEditorDefaults } from '@pqina/pintura';

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

    stickers: any = [
        {
            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 */
    ];
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    [stickers]="stickers"
></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 editor = $('#editor').pinturaDefault({
            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.

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

App.jsx
App.css

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

const editorDefaults = getEditorDefaults();

function App() {
    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                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',
                        },
                    },
                ]}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

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

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

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

            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',
                    },
                },
            ],
        };
    },

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

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

App.svelte

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

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        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',
                },
            },
        ]}
    />
</div>

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

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

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

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

    stickers: any = [
        // 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',
            },
        },
    ];
}

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

        var editor = $('#editor').pinturaDefault({
            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>

Programmatically adding a sticker

Stickers are rectangles with a backgroundImage. To programmatically add one we can update the imageAnnotation or imageDecoration properties.

This sets a sticker to the annotation array.

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

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        util: 'annotate',
        imageAnnotation: [
            {
                x: 128,
                y: 128,
                width: 512,
                height: 256,
                backgroundImage: 'sticker.svg',
                backgroundSize: 'contain',
            },
        ],
    });
</script>

App.jsx
App.css

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

const editorDefaults = getEditorDefaults();

function App() {
    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                util={'annotate'}
                imageAnnotation={[
                    {
                        x: 128,
                        y: 128,
                        width: 512,
                        height: 256,
                        backgroundImage: 'sticker.svg',
                        backgroundSize: 'contain',
                    },
                ]}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

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

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

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

            imageAnnotation: [
                {
                    x: 128,
                    y: 128,
                    width: 512,
                    height: 256,
                    backgroundImage: 'sticker.svg',
                    backgroundSize: 'contain',
                },
            ],
        };
    },

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

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

App.svelte

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

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        util={'annotate'}
        imageAnnotation={[
            {
                x: 128,
                y: 128,
                width: 512,
                height: 256,
                backgroundImage: 'sticker.svg',
                backgroundSize: 'contain',
            },
        ]}
    />
</div>

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

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

import { getEditorDefaults } from '@pqina/pintura';

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

    imageAnnotation: any = [
        {
            x: 128,
            y: 128,
            width: 512,
            height: 256,
            backgroundImage: 'sticker.svg',
            backgroundSize: 'contain',
        },
    ];
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    util="annotate"
    [imageAnnotation]="imageAnnotation"
></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 editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            util: 'annotate',
            imageAnnotation: [
                {
                    x: 128,
                    y: 128,
                    width: 512,
                    height: 256,
                    backgroundImage: 'sticker.svg',
                    backgroundSize: 'contain',
                },
            ],
        });
    });
</script>

If we want to add a sticker we can update the imageAnnotation array.

index.html

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./pintura.css" />
</head>

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

<button type="button" id="buttonAddShape">Add my sticker</button>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    const buttonAddShape = document.querySelector('#buttonAddShape');

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        util: 'annotate',
    });

    buttonAddShape.addEventListener('click', () => {
        // get crop rectangle reference
        const crop = editor.imageCrop;

        // sticker size
        const size = {
            width: 256,
            height: 256,
        };

        // center sticker position in crop
        const position = {
            x: crop.width * 0.5 - size.width * 0.5,
            y: crop.height * 0.5 - size.height * 0.5,
        };

        // add to list of annotation shapes
        const updatedAnnotationList = [
            ...editor.imageAnnotation,
            {
                ...position,
                ...size,
                backgroundImage: 'sticker.svg',
                backgroundSize: 'contain',
            },
        ];

        editor.imageAnnotation = updatedAnnotationList;
    });
</script>

App.jsx
App.css

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

const editorDefaults = getEditorDefaults();

function App() {
    const editorRef = useRef(null);

    const handleButtonClick = () => {
        // get crop rectangle reference
        const crop = editorRef.current.editor.imageCrop;

        // sticker size
        const size = {
            width: 256,
            height: 256,
        };

        // center sticker position in crop
        const position = {
            x: crop.width * 0.5 - size.width * 0.5,
            y: crop.height * 0.5 - size.height * 0.5,
        };

        // add to list of annotation shapes
        const updatedAnnotationList = [
            ...editorRef.current.editor.imageAnnotation,
            {
                ...position,
                ...size,
                backgroundImage: 'sticker.svg',
                backgroundSize: 'contain',
            },
        ];

        editorRef.current.editor.imageAnnotation = updatedAnnotationList;
    };

    return (
        <div className="App">
            <button type="button" onClick={handleButtonClick}>
                Add my sticker
            </button>

            <PinturaEditor
                ref={editorRef}
                {...editorDefaults}
                src={'image.jpeg'}
                util={'annotate'}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <button type="button" v-on:click="handleButtonClick($event)">
            Add my sticker
        </button>

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

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

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

    methods: {
        handleButtonClick: function () {
            // get crop rectangle reference
            const crop = this.$refs.editor.editor.imageCrop;

            // sticker size
            const size = {
                width: 256,
                height: 256,
            };

            // center sticker position in crop
            const position = {
                x: crop.width * 0.5 - size.width * 0.5,
                y: crop.height * 0.5 - size.height * 0.5,
            };

            // add to list of annotation shapes
            const updatedAnnotationList = [
                ...this.$refs.editor.editor.imageAnnotation,
                {
                    ...position,
                    ...size,
                    backgroundImage: 'sticker.svg',
                    backgroundSize: 'contain',
                },
            ];

            this.$refs.editor.editor.imageAnnotation = updatedAnnotationList;
        },
    },
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

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

App.svelte

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

    let editorDefaults = getEditorDefaults();

    let editor;

    const handleButtonClick = () => {
        // get crop rectangle reference
        const crop = editor.imageCrop;

        // sticker size
        const size = {
            width: 256,
            height: 256,
        };

        // center sticker position in crop
        const position = {
            x: crop.width * 0.5 - size.width * 0.5,
            y: crop.height * 0.5 - size.height * 0.5,
        };

        // add to list of annotation shapes
        const updatedAnnotationList = [
            ...editor.imageAnnotation,
            {
                ...position,
                ...size,
                backgroundImage: 'sticker.svg',
                backgroundSize: 'contain',
            },
        ];

        editor.imageAnnotation = updatedAnnotationList;
    };
</script>

<div>
    <button type="button" on:click={handleButtonClick}>Add my sticker</button>

    <PinturaEditor
        bind:this={editor}
        {...editorDefaults}
        src={'image.jpeg'}
        util={'annotate'}
    />
</div>

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

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

import { getEditorDefaults } from '@pqina/pintura';

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

    @ViewChild('editor') editor?: any;

    editorDefaults: any = getEditorDefaults();

    handleButtonClick(): void {
        // get crop rectangle reference
        const crop = this.editor.editor.imageCrop;

        // sticker size
        const size = {
            width: 256,
            height: 256,
        };

        // center sticker position in crop
        const position = {
            x: crop.width * 0.5 - size.width * 0.5,
            y: crop.height * 0.5 - size.height * 0.5,
        };

        // add to list of annotation shapes
        const updatedAnnotationList = [
            ...this.editor.editor.imageAnnotation,
            {
                ...position,
                ...size,
                backgroundImage: 'sticker.svg',
                backgroundSize: 'contain',
            },
        ];

        this.editor.editor.imageAnnotation = updatedAnnotationList;
    }
}

<button #buttonAddShape type="button" (click)="handleButtonClick()">
    Add my sticker
</button>

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

<button type="button" id="buttonAddShape">Add my sticker</button>

<div id="editor"></div>

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var buttonAddShape = $('#buttonAddShape');

        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            util: 'annotate',
        });

        buttonAddShape.on('click', function () {
            // get crop rectangle reference
            const crop = $(editor).pintura('imageCrop');

            // sticker size
            const size = {
                width: 256,
                height: 256,
            };

            // center sticker position in crop
            const position = {
                x: crop.width * 0.5 - size.width * 0.5,
                y: crop.height * 0.5 - size.height * 0.5,
            };

            // add to list of annotation shapes
            const updatedAnnotationList = [
                ...editor.imageAnnotation,
                {
                    ...position,
                    ...size,
                    backgroundImage: 'sticker.svg',
                    backgroundSize: 'contain',
                },
            ];
            $(editor).pintura('imageAnnotation', updatedAnnotationList);
        });
    });
</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.

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

App.jsx
App.css

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

const editorDefaults = getEditorDefaults();

function App() {
    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                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,
                        },
                    ],
                ]}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

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

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

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

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

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

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

App.svelte

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

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        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,
                },
            ],
        ]}
    />
</div>

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

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

import { getEditorDefaults } from '@pqina/pintura';

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

    stickers: any = [
        [
            // 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,
            },
        ],
    ];
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    [stickers]="stickers"
></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 editor = $('#editor').pinturaDefault({
            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>