How to automatically crop the image subject?

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

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

// create an editor
const editor = openDefaultEditor({
    src: './my-image.jpeg',
});

// listen for image load evevnt
editor.on('load', ({ dest }) => {
    // 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;
    };
});