Editor JavaScript Module

Importing the JavaScript module

The pintura.js file exports all Pintura Image Editor submodules.

The Pintura Image Editor module supports tree-shaking. While we might import the entire module in some of the documentation examples, in a real project we should only import the functionality we need.

We can synchronously import the Pintura Image Editor JavaScript module in our project like this.

<script type="module">
    import * as pintura from './pintura.js';
</script>

Or we can use a dynamic import to load the module asynchronously.

<script type="module">
    import('./pintura.js').then((pintura) => {});
</script>

We can also use the async/await pattern.

<script type="module">
    const pintura = await import('./pintura.js');
</script>

Loading the styles

Styles aren't included in the pintura.js module so we'll need to load them separately. We can so by adding a external resource link element to the <head> of the page.

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

If our JavaScript bundler supports it we can alternatively import the CSS file in one of our JavaScript modules.

import './pintura.css';

Installing the IIFE version

We advise against using the IIFE version of Pintura Image Editor and to instead use the JavaScript module version.

We can install the IIFE version of Pintura Image Editor by adding it to the page with a <script> tag.

<script src="pintura/pintura-iife.js"></script>

<!-- The Pintura Image Editor API is now available on the `window.pintura` variable -->

The IIFE version automatically creates a window.pintura variable which contains all its functionality.

console.log(window.pintura);
// logs: { appendEditor: …, openEditor: …, setPlugins: …, … }

Global variables can also be accessed without prepending window

console.log(pintura);
// logs: { appendEditor: …, openEditor: …, setPlugins: …, … }

To use the Pintura Image Editor functionality we can use Destructuring Assignment or we can call functions directly on the pintura object.

const { openDefaultEditor } = pintura;

openDefaultEditor(/* arguments here */);

Or we can call functions directly on the pintura object.

pintura.openDefaultEditor(/* arguments here */);

Instead of the spread operator ... we can use Object.assign

// with spread operator
openDefaultEditor({
    locale: {
        ...locale_en_gb,
        ...plugine_locale_en_gb,
    },
});

// with Object.assign()
openDefaultEditor({
    locale: Object.assign({}, locale_en_gb, plugine_locale_en_gb),
});

Please note that in all documentation examples we import functionality from the JavaScript module version. This is not possible with the IIFE version.

Instead use Destructuring Assignment or access functionality directly on the window.pintura object (see examples above).