ngx-image-editor

Awesome editor for Angular 6 based on Angular Material

Live Demo on Slackblitz

Getting started

Step 1: Install Angular Material (+ Material Icons) and Angular Flex Layout

• Angular Material
• Angular Flex-Layout

Step 2: Install cropperjs

    yarn add cropperjs

Step 3: Add cropperjs file paths in your .angular.json

}
       "styles": [
         "node_modules/cropperjs/dist/cropper.css"
       ],
       "scripts": [
         "node_modules/cropperjs/dist/cropper.js"
       ]
}

Step 4: Install ngx-image-editor:

   yarn add ngx-image-editor

Step 5: Import the NgxImageEditorModule within your app:

      import {NgxImageEditorModule} from "ngx-image-editor";

      @NgModule({
        imports: [
          NgxImageEditorModule
        ]
      })

Step 6: Use within your application:

   <ngx-image-editor [config]="yourConfig"></ngx-image-editor>

API

Configuration

Example

@Component({
  selector: 'app-root',
   styleUrls: ['./app.component.css']
  template: `
      <ngx-image-editor
        [config]="config"
        (close)="close($event)"
        (file)="getEditedFile($event)">
      </ngx-image-editor>

  `,

})
export class AppComponent {
  public config = {
    ImageName: 'Some image',
    AspectRatios: ["4:3", "16:9"],
    ImageUrl: 'https://static.pexels.com/photos/248797/pexels-photo-248797.jpeg',
    ImageType: 'image/jpeg'
  }

  public close() {
    // Fired when the editor is closed.
  }

  public getEditedFile(file: File) {
    // Fired when the file has been processed.
  }
}

Contributors

Hristo Georgiev	Taulant Disha