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