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.