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.
Loading a blank canvas
We can set the src
property to an empty <canvas>
element to load a new blank image.
import { openDefaultEditor } from './doka.js';
// Create a new image canvas
const image = document.createElement('canvas');
image.width = 1024;
image.height = 768;
// The default <canvas> is transparent, let's make it white
const imageContext = image.getContext('2d');
imageContext.fillStyle = 'white';
imageContext.fillRect(0, 0, image.width, image.height);
// Open the default image editor in a modal
const editor = openDefaultEditor({
src: image,
});
// Show resulting image preview
editor.on('process', ({ dest }) => {
const preview = new Image();
preview.src = URL.createObjectURL(dest);
document.body.appendChild(preview);
});