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