How to automatically crop the image subject?

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

// create an editor
const editor = openEditor({
    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;
    };
});