Migrating from version 6

The new version 7 API is completely new and therefor differs in many aspects from the version 6 API.

The overview below will show the core functions in version 6 with their version 7 counterparts.

Appending an editor to an HTML element

In version 6 we'd use the create method, in version 7 this is replaced with the appendDefaultEditor function.

// v6
import * as Doka from './doka.esm.min.js';
Doka.create({
    src: './my-image.jpeg',
});

// v7
import { appendDefaultEditor } from './doka.js';
appendDefaultEditor({
    src: './my-image.jpeg',
});

Creating an editor in a modal

In version 6 we'd use the create method, in version 7 this is replaced with the openDefaultEditor function.

// v6
import * as Doka from './doka.esm.min.js';
Doka.create({
    src: './my-image.jpeg',
});

// v7
import { openDefaultEditor } from './doka.js';
openDefaultEditor({
    src: './my-image.jpeg',
});

Getting the image data

In version 6 we'd use either the getData or save method, in version 7 this is replaced with the processImage method.

// v6
editor.getData().then((output) => {
    // output contains `data` and `file` object
});

// v7
editor.processImage().then((res) => {
    // res contains `dest`, `imageState`, and `size` objects
});

Output image parameters

In version 6 the output parameters were set on the main configuration object, for version 7 this is moved to the createDefaultImagerWriter helper function.

For the storage alternative in version 7 consult the store docs.

// v6
Doka.create({
    src: './my-image.jpeg',

    // output properties
    outputQuality: 50,
    outputStripImageHead: false,
    outputWidth: 512,
    outputHeight: 512,
    outputFit: 'cover',
    outputUpscale: true,
    afterCreateOutput: (output, setLabel) => {
        // custom upload here
    },
});

// v7
openDefaultEditor({
    src: './my-image.jpeg',

    // image writer properties
    imageWriter: createDefaultImageWriter({
        quality: 0.5,
        copyImageHead: true,
        targetSize: {
            width: 512,
            height: 512,
            fit: 'cover',
            upscale: true,
        },
        store: (state, options, onprogress) => {
            // custom upload here
        },
    }),
});

Removed and replaced properties

The following properties are no longer available in version 7 or have been replaced.

• allowAutoDestroy and allowAutoClose have been removed, instead the editor will automatically clean up after itself when opened with openEditor.
• outputFile has been removed, instead if the imagewriter property has been set, an output image will be generated using the defined writer process. Omit the writer and the editor will only output the image state.
• outputData has been removed, the current imageState will always be dispatched.
• imagePreviewScaleMode is replaced with previewUpscale
• cropAllowInstructionZoom has been removed, the new zoom control should make perfectly clear how to zoom in on the image.
• styleCropCorner is now called cropImageSelectionCornerStyle
• styleLayoutMode has been removed, it is automatically managed by the factory function used to create the editor instance.

Converting data object to image state objects

Use the legacyDataToImageState function to covert the v6 image data objects to v7 image state objects.