Setting up Pintura Image Editor with Svelte

For a quick start use the Svelte example project as a guideline.

It includes a normal, modal, and overlay editor example, as well as an example showing how to integrate FilePond with Pintura.

Installing the Svelte modules

Using test version

Test versions of the pintura and svelte-pintura modules are available on NPM.

npm install --save @pqina/svelte-pintura @pqina/pintura

Using private npm

The pintura module is available on the pqina private npm.

In our project root directory we create a file called .npmrc and copy the snippet below to the file. Then we replace PQINA_NPM_KEY with our private npm key as displayed on the pqina customer portal.

@pqina:registry=https://npm.pqina.nl/
//npm.pqina.nl/:_authToken=PQINA_NPM_KEY

Now we can install the needed modules like shown below.

npm install --save @pqina/svelte-pintura @pqina/pintura

Using local modules

Instead of installing from the private npm we can create a local_modules folder inside our project root directory. We then copy paste the pintura files from the product package, the svelte-pintura package is available on npm.

We can now install the modules like shown below.

npm install --save @pqina/svelte-pintura ./local_modules/pintura

Svelte Events and properties

To listen for events we can use the on: attribute.

<PinturaEditor on:load={handleEvent}></PinturaEditor>

Properties names are set the same way as in the JavaScript version of the editor.

<PinturaEditor src="image.jpeg" imageCropAspectRatio={1}></PinturaEditor>

Default Svelte implementation example

In the default example below we'll use the getEditorDefaults method to quickly create an image editor.

This creates a "default" editor that has all available plugins loaded and comes preset with all plugin default options and English locale. Each of these settings can be adjusted freely.

<script>
    // Import from `pintura`
    import '@pqina/pintura/pintura.css';

    // Import the editor default configuration
    import { getEditorDefaults } from '@pqina/pintura';

    // Import from `svelte-pintura`
    import { PinturaEditor } from '@pqina/svelte-pintura';
</script>

<div style="height:600px">
    <PinturaEditor
        {...getEditorDefaults()}
        src="image.jpeg"
        imageCropAspectRatio={1}
    />
</div>

Advanced Svelte implementation example

In this example we'll create a custom editor, using a custom set of plugins, locale, and available options.

While this example is a lot more verbose it does allow us to create a more optimal editor package. The build process will tree-shake unused functionality resulting in a smaller build target.

<script>
    // Import from `pintura`
    import '@pqina/pintura/pintura.css';

    // Import the editor functionality
    import {
        // Import the default image reader and writer
        createDefaultImageReader,
        createDefaultImageWriter,

        // The method used to register the plugins
        setPlugins,

        // The plugins we want to use
        plugin_crop,
        plugin_finetune,
        plugin_annotate,

        // The user interface and plugin locale objects
        locale_en_gb,
        plugin_crop_locale_en_gb,
        plugin_finetune_locale_en_gb,
        plugin_annotate_locale_en_gb,

        // Because we use the annotate plugin we also need
        // to import the markup editor locale and the shape preprocessor
        markup_editor_locale_en_gb,
        createDefaultShapePreprocessor,

        // Import the default configuration for the markup editor and finetune plugins
        markup_editor_defaults,
        plugin_finetune_defaults,
    } from '@pqina/pintura';

    // Import from `svelte-pintura`
    import { PinturaEditor } from '@pqina/svelte-pintura';

    // This registers the plugins with Pintura Image Editor
    setPlugins(plugin_crop, plugin_finetune, plugin_annotate);

    // Create our editor configuration
    const editorConfig = {
        // This will read the image data (required)
        imageReader: createDefaultImageReader(),

        // This will write the output image
        imageWriter: createDefaultImageWriter(),

        // The markup editor default options, tools, shape style controls
        ...markup_editor_defaults,

        // The finetune util controls
        ...plugin_finetune_defaults,

        // This handles complex shapes like arrows / frames
        shapePreprocessor: createDefaultShapePreprocessor(),

        // This will set a square crop aspect ratio
        imageCropAspectRatio: 1,

        // The icons and labels to use in the user interface (required)
        locale: {
            ...locale_en_gb,
            ...plugin_crop_locale_en_gb,
            ...plugin_finetune_locale_en_gb,
            ...plugin_annotate_locale_en_gb,
            ...markup_editor_locale_en_gb,
        },
    };
</script>

<div style="height:600px">
    <PinturaEditor
        {...editorConfig}
        src="image.jpeg"
        imageCropAspectRatio={1}
    />
</div>

Next steps

With the editor set up, we can continue to configure the editor to our liking by adjusting the available options exposed by the editor API