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/pinturaAdd 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_KEYNow we can install the needed modules like shown below.
npm install --save @pqina/angular-pintura @pqina/pinturaAdd 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/pinturaAdd 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
