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.

Installation

Doka is exposed as a module wrapped in a UMD or as ES module.

The required files are available in the downloadable package from the store.

Use Doka on the global scope

To expose Doka on the global scope we add the doka.min.js file using a <script> tag.

<head>
    <link href="doka.min.css" rel="stylesheet" />
</head>

<!-- add before </body> -->
<script src="doka.min.js"></script>

Use with RequireJS or other AMD loaders

We add the Doka style sheet to the <head> of the document.

<head>
    <link href="doka.min.css" rel="stylesheet" />
</head>

We can use the doka UMD module doka.min.js as a dependency in RequireJS.

define(['./doka.min'], function (Doka) {
    // Doka is now available
});

Use with ES6

We can import the Doka Image Editor module from the doka.esm.min.js file. If you use Webpack you can import the styles as well.

import * as Doka from './doka.esm.min';
import './doka.min.css';

// Doka is now available

Use with TypeScript

The package ships with a TypeScript definitions file, include doka.d.ts in your project and you can use Doka with TypeScript.

Conditional Compilation

When using the doka.mjs and doka.scss files we can optimise our compiler output by setting conditional compilation statements. This can remove up to 30% of the source code resulting in significant smaller output files.

Statement Default Description
_EXCLUDE_CROP_UTIL false Set to true if you don't use the crop util
_EXCLUDE_FILTER_UTIL false Set to true if you don't use the filter util
_EXCLUDE_COLOR_UTIL false Set to true if you don't use the color util
_EXCLUDE_RESIZE_UTIL false Set to true if you don't use the resize util
_EXCLUDE_MARKUP_UTIL false Set to true if you don't use the markup util
_EXCLUDE_TRANSFORM_IMAGE false Removes the logic that is used to generate an output file. Useful for when combining Doka with FilePond as FilePond takes care of creating the output file.

Conditional compilation can be done with JSCC or other node libraries. See example below for a working JSCC example.

// File cc.js
const fs = require('fs');
const jscc = require('jscc');

// The input library files
const files = ['doka.src.scss', 'doka.src.mjs'];

// The functionality exclusion settings
const config = {
    _EXCLUDE_CROP_UTIL: false, // Set to `true` if you don't use the crop util
    _EXCLUDE_FILTER_UTIL: true, // Set to `true` if you don't use the filter util
    _EXCLUDE_COLOR_UTIL: true, // Set to `true` if you don't use the color util
    _EXCLUDE_RESIZE_UTIL: true, // Set to `true` if you don't use the resize util
    _EXCLUDE_MARKUP_UTIL: true, // Set to `true` if you don't use the markup util
    _EXCLUDE_TRANSFORM_IMAGE: true, // If you use Doka with FilePond, this can be set to `true` as FilePond deals with the image transformations
};

// Generate new library files using jscc
files.forEach((file) => {
    const input = fs.readFileSync(`${file}`, { encoding: 'utf-8' });
    const output = jscc(input, '', { sourceMap: false, values: config });
    fs.writeFileSync(`cc.${file}`, output.code, 'utf8');
});

Create a cc.js file in the Doka package src folder and copy the above code to the file. Run node cc in the src folder to generate the new "cc.doka.src.mjs" and "cc.doka.src.scss" library files.

Next steps

If you're not using webpack you can include the styles in your document as shown in the global code example.

With the Doka files in place we can now get started setting up a Doka instance.