Setting up Pintura Image Editor with Angular

For a quick start use the Angular example project included in the product package as a guideline. It includes a normal, modal, and overlay editor example.

Installation on Angular versions 9 and up

We can install pintura and angular-pintura with npm by copying both of the dependencies to the 'local_modules' folder in the root of our Angular project and running the following command to install them locally.

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

Please 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"
                        ]
                    }
                }
            }
        }
    }
}

Installation on Angular versions 8 and lower

We can install pintura and angular-viewengine-pintura by copying both folders to a local_modules folder in the Angular project roo.

Please 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"
                        ]
                    }
                }
            }
        }
    }
}

Using the 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.

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]="my-image.jpeg" [options]="myOptions"></pintura-editor>

Default 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 'angular-pintura';
// For Angular version 8 and below use the following import statement instead.
// import { AngularPinturaModule } from '../../local_modules/angular-pintura/angular-pintura.module';

@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 '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 = 'assets/my-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 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 'angular-pintura';
// For Angular version 8 and below use the following import statement instead.
// import { AngularPinturaModule } from '../../local_modules/angular-pintura/angular-pintura.module';

@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 'pintura';

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

@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 = 'assets/my-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 configuration options