Getting Started - Angular
Supported Angular Versions
The PhotoEditorSDK will work in any Angular version with Typescript 3.x or higher. Angular version 6 and below use Typescript 2.x which is incompatible with the typings for the PhotoEditorSDK and will cause Typescript related compiler errors.
The only option to run v5 of the PhotoEditorSDK in the older versions of Angular would be to disable the library type checks in the compilerOptions
of the tsconfig.json
.
{
"compilerOptions": {
"skipLibCheck": true
}
}
Let’s get started!
We will be using angular cli for simplicity.
Create a project
- Start a new project by following the
angular cli
prompts
ng new my-app
cd my-app
ng serve
- Then open
http://localhost:4200/
to see your app.
Installing peer dependencies
PhotoEditor SDK needs following peer dependencies:
- React >= 16.3
- React DOM >= 16.3
- Styled Components >= 4.4
- Run
npm install --save react@16.3 react-dom@16.3 styled-components@4.4
to include them in the project. - Run
npm install --save-dev @types/react@16.3 @types/react-dom@16.3
to include the types in the project. - Add
"allowSyntheticDefaultImports": true
to thecompilerOptions
intsconfig.json
in order to compile React.
Installing PhotoEditor SDK
- Run
npm install --save photoeditorsdk@5.3.1
.
You will be left with following structure in your node_modules/photoeditorsdk/
├── assets
│ ├── adjustment
│ ├── colorpicker
│ ├── controls
│ ├── filter
│ ├── focus
│ ├── font
│ ├── frame
│ ├── overlay
│ ├── sticker
│ ├── textdesign
│ └── transform
├── esm
└── cjs
The package contains three folders that you need to integrate to your project.
assets
: It contains all assets required for the PhotoEditor, this includes for example assets for frames, stickers and the ui.cjs
: It contains PhotoEditor SDK UI bundled as commonjs modules, will be loaded for older browser versions.esm
: It contains PhotoEditor SDK UI bundled as ECMAScript modules, will be loaded for supported modern browser versions.
- Copy the contents from
node_modules/photoeditorsdk/assets
tosrc/assets/photoeditorsdk
.
Creating an Editor component
Use the angular cli
to generate the scaffold for your editor component.
ng generate component photo-editor
photo-editor.component.html
<div #psdkContainer style="width: 100vw; height: 100vh;"></div>
photo-editor.component.ts
import { Component, AfterViewInit, ViewChild, Input } from "@angular/core";
import { PhotoEditorSDKUI } from "photoeditorsdk/no-polyfills";
const license = "";
@Component({
selector: "app-photo-editor",
templateUrl: "./photo-editor.component.html",
})
export class PhotoEditorComponent implements AfterViewInit {
@Input()
public src: string;
@ViewChild("psdkContainer")
private container: ElementRef;
public editor: EditorApi;
ngAfterViewInit() {
this.initEditor();
}
async initEditor() {
try {
if (this.editor) {
this.editor.dispose();
}
this.editor = await PhotoEditorSDKUI.init({
license,
container: this.container.nativeElement,
image: this.src,
assetBaseUrl: "/assets/photoeditorsdk",
});
} catch (error) {
console.log(error);
}
}
}
Add the component to the app
app.component.html
<app-photo-editor
src="https://static.photoeditorsdk.com/libraries/unsplash/raw/PZAxzN5DPkc.jpg"
></app-photo-editor>
Add the necessary polyfills
These polyfills have to be importet before import 'zone.js/dist/zone';
.
polyfills.ts
// Polyfills Promise, fetch, Object.assign, Symbol, Set, Map
import "react-app-polyfill/ie11";
// Loads core-js/stable, regenerator-runtime
import "react-app-polyfill/stable";
import "core-js/features/array/find";
import "core-js/features/array/map";
Add the following snippet to the polyfills.ts
if you encounter this error message process is not defined
:
(window as any).process = {
env: { DEBUG: undefined },
};
CORS
If you are loading images from external sources (e.g. from an AWS bucket), you need to first configure Cross-Origin Resource Sharing for both the server and the image.Otherwise, you will see errors such as
Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at [...] may not be loaded.
or
Unable to get image data from canvas because the canvas has been tainted.
Please follow the instructions on how to properly configure CORS here.
Ready to go!
There you have it. PhotoEditor SDK for the Web is ready to use. Refer to the configuration documentaion for more configuration options.