v8.48.3

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>

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

    editor.on('load', () => {
        // Create a normal image and send it to smartcrop.js
        const image = new Image();
        image.src = URL.createObjectURL(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>