How can I generate a square thumbnail based on the output image?

We can use the processImage function to programmatically create images.

See the example below where we wait for the 'process' event to fire and then use processImage to generate a thumbnail.

import {
    openDefaultEditor,
    processImage,
    createDefaultImageReader,
    createDefaultImageWriter,
} from '/pintura.js';

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

// we end up here if the user is done editing
editor.on('process', ({ dest }) => {
    // use the output image as the source
    processImage(dest, {
        // we want a square crop
        imageCropAspectRatio: 1,

        // set the default reader
        imageReader: createDefaultImageReader(),

        // set the default writer and supply the intended size of the thumbnail
        imageWriter: createDefaultImageWriter({
            targetSize: {
                width: 256,
                height: 256,
            },
        }),
    }).then(({ dest }) => {
        // `dest` is our thumbnail as a File object
        console.log(dest);
    });
});