v8.77.0

Detecting and cropping faces in images

By combining Pintura Image Editor with Smartcrop.js we can automatically move the crop rectangle to the most prominent subject in the image.

<!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' });

    editor.on('load', (imageState) => {
        // Please note that this example doesn't include smartcrop it'll have to be added manually.

        // Create a normal image and send it to smartcrop.js
        const image = new Image();
        image.src = URL.createObjectURL(imageState.dest);
        image.onload = async () => {
            // Calculate the smart crop rectangle, set aspect ratio to 3:4
            const { topCrop } = await smartcrop.crop(image, {
                width: 3,
                height: 4,
            });

            // Update the editor crop
            editor.imageCrop = topCrop;
        };
    });
</script>