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.

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

// Open the default image editor in a modal
const editor = openDefaultEditor({
    src: './my-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,
            ],
        };
    },
});

// Show resulting image preview
editor.on('process', ({ dest }) => {
    const preview = new Image();
    preview.src = URL.createObjectURL(dest);
    document.body.appendChild(preview);
});