Migrating from version 7

The rebrand required a rename of CSS classes, frameworks componets, custom elements, and other internal logic that used the old name. Because this release was going to be a breaking change deprecated methods have also been removed.

The overview below will show the core version 7 items with their version 8 countersparts.

Name changes

The following name changes have been applied.

Term Replacement
doka-image-editor pintura-editor
DokaImageEditor PinturaEditor
doka pintura
Doka Pintura

The Cordova WebAPI backup script now stores the backup in __pqina_webapi__

Image input element

To bring the <image-input> custom element in line with the rest of the library it has been renamed to <pintura-input>

Removed

The following deprecated exports and methods have been removed or replaced.

History API

The history API methods have been moved to the editor history property.

Removed property Replacement
undo() history.undo()
redo() history.redo()
revert() history.revert()
import { openDefaultEditor } from './pintura.js';

const editor = openDefaultEditor({
    src: './my-image.jpeg',
});

// run undo method on history property
editor.history.undo();

Exports

Removed export Replacement
imageOrienter createDefaultImageOrienter()
plugin_annotate_defaults markup_editor_defaults
plugin_decorate_defaults markup_editor_defaults
component_shape_editor_locale_en_gb markup_editor_locale_en_gb
plugin_crop_defaults Set cropSelectPresetOptions programatically, see plugin_crop_defaults entry below for original value.
plugin_resize_defaults No replacement as previously export contained empty object.
plugin_sticker_defaults No replacement as previously export contained empty object.

imageOrienter

import { openDefaultEditor, createDefaultImageOrienter } from './pintura.js';

openDefaultEditor({
    src: './my-image.jpeg',
    imageOrienter: createDefaultImageOrienter(),
});

plugin_crop_defaults

import { openDefaultEditor } from './pintura.js';

openDefaultEditor({
    src: './my-image.jpeg',
    cropSelectPresetOptions: [
        [
            'Crop',
            [
                [undefined, 'Custom'],
                [1, 'Square'],
                [4 / 3, 'Landscape'],
                [3 / 4, 'Portrait'],
            ],
        ],
        [
            'Size',
            [
                [[180, 180], 'Profile Picture'],
                [[1200, 600], 'Header Image'],
                [[800, 400], 'Timeline Photo'],
            ],
        ],
    ],
});