This is the archived documentation for Doka Image Editor v6.

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

Getting started

Ensure you've installed Doka by following the installation instructions before you take these steps.

Creating a Doka instance

With access to the Doka object we can now create a Doka instance like shown below.

const doka = Doka.create();

By calling the edit method on the doka instance and passing a file object we tell Doka we want to open the editor and start editing the passed file object.

doka.edit(file).then((output) => {
    // the result of the image editing
});

That's it.

The above logic will open Doka in a fullscreen popover and show the image ready for editing. When the user taps the "Done" button the Promise is resolved, the resulting file is contained in the output parameter.

An easy way to get a file in the editor is to get one from a <input type="file">. We'll do that quickly below.

<input type="file" />

<script>
    // Create the instance
    const doka = Doka.create();

    // Listen to change event on file input and pass selected file to Doka
    document.querySelector('input').addEventListener('change', (e) => {
        doka.edit(e.target.files[0]).then((output) => {
            console.log('Done editing image', output);
        });
    });
</script>

We can now customize Doka to our needs by passing options to the create method.