v8.77.0

Setting up Pintura Image Editor with Angular

For a quick start use the Angular 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 Angular modules

Using test version

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

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

Add the path to the Pintura Image Editor styles 'local_modules/pintura/pintura.css' to the build/options/styles array in your angular.json configuration file.

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "angular": {
            "architect": {
                "build": {
                    "options": {
                        "styles": [
                            "src/styles.css",
                            "node_modules/@pqina/pintura/pintura.css"
                        ]
                    }
                }
            }
        }
    }
}

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/angular-pintura @pqina/pintura

Add the path to the Pintura Image Editor styles 'local_modules/pintura/pintura.css' to the build/options/styles array in your angular.json configuration file.

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "angular": {
            "architect": {
                "build": {
                    "options": {
                        "styles": [
                            "src/styles.css",
                            "node_modules/@pqina/pintura/pintura.css"
                        ]
                    }
                }
            }
        }
    }
}

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 angular-pintura package is available on npm.

We can now install the modules like shown below.

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

Add the path to the Pintura Image Editor styles 'local_modules/pintura/pintura.css' to the build/options/styles array in your angular.json configuration file.

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "angular": {
            "architect": {
                "build": {
                    "options": {
                        "styles": [
                            "src/styles.css",
                            "local_modules/pintura/pintura.css"
                        ]
                    }
                }
            }
        }
    }
}

Angular 8 and older

When installing Pintura on Angular 8 or lower we need to add { "skipLibCheck": true } to the compilerOptions section of our projects tsconfig.json file.

Using the Angular components

Now we can import the modules like we normally would and use the Angular <pintura-editor>, <pintura-editor-modal>, and <pintura-editor-overlay> components.

Angular Events and properties

To bind events we can use the Angular event binding syntax.

<pintura-editor (load)="onLoadImage($event)"></pintura-editor>

Properties can be used as we would with the normal JavaScript version of the editor but should be assigned to the options attribute. Only src can be supplied with a separate attribute.

<pintura-editor [src]="image.jpeg" [options]="myOptions"></pintura-editor>

Default Angular 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.

<!-- app.component.html -->
<div>
    <div style="height: 600px">
        <pintura-editor [src]="src" [options]="options"></pintura-editor>
    </div>
</div>
// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// import AngularPinturaModule
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

// app.component.ts
import { Component } from '@angular/core';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    constructor(private sanitizer: DomSanitizer) {}

    // The source image to load
    src: SafeUrl = 'image.jpeg';

    // Our editor configuration
    options: any = {
        // Pass the editor default configuration options
        ...getEditorDefaults(),

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

Advanced Angular 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.

<!-- app.component.html -->
<div>
    <div style="height: 600px">
        <pintura-editor [src]="src" [options]="options"></pintura-editor>
    </div>
</div>
// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// import AngularPinturaModule
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

// app.component.ts
import { Component } from '@angular/core';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

// 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';

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    constructor(private sanitizer: DomSanitizer) {}

    // The source image to load
    src: SafeUrl = 'image.jpeg';

    // Our editor configuration
    options: any = {

        // 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,
        },
    }
}

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