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: '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: 'image.jpeg',
imageOrienter: createDefaultImageOrienter(),
});
plugin_crop_defaults
import { openDefaultEditor } from './pintura.js';
openDefaultEditor({
src: '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'],
],
],
],
});