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.

This overview is not complete yet and will be amended in future updates.

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',
});

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) => {},
});

// 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) => {},
    }),
});

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.