v8.32.2

Cropping stickers with a secondary Pintura instance

We can use the willRenderShapeControls property to add a "crop" button above a sticker shape.

<!DOCTYPE html>

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

<style>
    .pintura-sticker-editor {
        --editor-modal-overlay-opacity: 0.65;
        --editor-modal-border-radius: 1.5rem;
        --editor-max-width: 40rem;
        --editor-max-height: 50rem;
    }
</style>

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

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

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',

        // Available stickers
        stickers: [
            './sticker-one.svg',
            './sticker-two.svg',
            './sticker-three.svg',
        ],

        // Manipulate shape controls menu
        willRenderShapeControls: (controls, selectedShapeId) => {
            controls[0][3].push(
                // Add an Edit button
                createNode('Button', 'my-button', {
                    label: 'Edit',
                    onclick: () => {
                        // Find the currently selected shape
                        const shape = editor.imageAnnotation.find(
                            (shape) => shape.id === selectedShapeId
                        );

                        // Create our sticker editor and use the current backgroundImage as src
                        const stickerEditor = openDefaultEditor({
                            class: 'pintura-sticker-editor',
                            src: shape.backgroundImage,
                        });

                        // Update the shape when the sticker is edited
                        stickerEditor.on('process', ({ dest }) => {
                            // Update the backgroundImage of the active shape
                            shape.backgroundImage = URL.createObjectURL(dest);

                            // Refresh annotations
                            editor.imageAnnotation = editor.imageAnnotation;
                        });
                    },
                })
            );

            return controls;
        },
    });
</script>