This is the archived documentation for Doka Image Editor v7.

Please visit pqina.nl/pintura/docs/ to see documentation for the latest version of Pintura Image Editor.

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 {
    openEditor,
    processImage,
    createDefaultImageReader,
    createDefaultImageWriter,
} from '/doka.js';

const editor = openEditor({
    src: './my-image.jpeg',
    imageReader: createDefaultImageReader(),
    imageWriter: createDefaultImageWriter(),
});

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