angular-img-editor v0.0.5

Angular Image Editor!

Awesome image editor in Angular 8

Live Demo on Stackblitz

Getting Started

Step 1: Install angular-img-editor

npm i angular-img-editor

Step 2: Add AngularImgEditorModule into your app.module.ts file

import { BrowserModule } from  '@angular/platform-browser';
import { NgModule } from  '@angular/core';
import { AngularImgEditorModule } from  'angular-img-editor';
import { AppComponent } from  './app.component';

@NgModule({
declarations: [ AppComponent ],
imports: [ BrowserModule, AngularImgEditorModule],
providers: [],
bootstrap: [AppComponent]
})

export  class  AppModule { }

Step 3: Add <sb-angular-img-editor></sb-angular-img-editor>tag into html file

<sb-angular-img-editor [canvasTextSettings]="canvasTextSettings"></sb-angular-img-editor>

Step 4: Add canvasTextSettingsobject into component file

canvasTextSettings =  {   
    imageUrl:  '',  // Pass your image url here
    text:  '',   // Text you want on your image
    size:  '95px',  // Size of the text
    color:  '#000000',   // Default color of the text
    fontFamily:  'Calibri',  // Font Style you want to apply
    effect:  '', // gradient effect, value is effect 1, effect 2 upto effect 6
    bold:  false,
    italic:  false
};