v8.48.3

Showing a circular crop overlay

We can use the willRenderCanvas property to adjust the preview output of the editor.

To apply a circular mask to the output image see the circular mask example.

<!DOCTYPE html>

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

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

        // We'll request a square crop
        imageCropAspectRatio: 1,

        // Let's draw a circle on top of the editor preview when in the crop util
        willRenderCanvas: (shapes, state) => {
            const {
                utilVisibility,
                selectionRect,
                lineColor,
                backgroundColor,
            } = state;

            // Exit if crop utils is not visible
            if (utilVisibility.crop <= 0) return shapes;

            // Get variable shortcuts to the crop selection rect
            const { x, y, width, height } = selectionRect;

            return {
                // Copy all props from current shapes
                ...shapes,

                // Now we add an inverted ellipse shape to the interface shapes array
                interfaceShapes: [
                    {
                        x: x + width * 0.5,
                        y: y + height * 0.5,
                        rx: width * 0.5,
                        ry: height * 0.5,
                        opacity: utilVisibility.crop,
                        inverted: true,
                        backgroundColor: [...backgroundColor, 0.5],
                        strokeWidth: 1,
                        strokeColor: [...lineColor],
                    },
                    // Spread all existing interface shapes onto the array
                    ...shapes.interfaceShapes,
                ],
            };
        },
    });
</script>