ngx-image-editor's Introduction

ngx-image-editor

Awesome editor for Angular 5 based on Angular Material

Getting started

Pre-requisites:

Angular Material

  npm install --save @angular/material

Angular Flex-Layout

   npm install --save @angular/flex-layout

Cropperjs

Step 1: Install cropperjs

    npm install --save cropperjs

Step 2: Add `cropperjs` file paths in your `.angular-cli.json`

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

Properties

@Input() config: EditorOptions

@Output() close: EventEmitter

@Output() file: EventEmitter

Usage:

Step 1: Install `ngx-image-editor`:

     npm install --save ngx-image-editor

Step 2: Import the `NgxImageEditorModule` within your app:

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

      @NgModule({
        imports: [
          NgxImageEditorModule
        ]
      })

EditorOptions:

ImageName: String (required)
ImageUrl: String (optional)
ImageType: String (optional)
- Default type is image/jpeg
File: File (optional)
AspectRatios: RatioType[] (optional)
- '6:9' | '4:3' | '1:1' | '2:3' | 'Default'

Notes:

In the EditorOptions can pass either ImageUrl or File.

Example

<!--Html-->
<ngx-image-editor 
      [config]="config" 
      (close)="close($event)" 
      (file)="getEditedFile($event)">
</ngx-image-editor>

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

public close() {
    
}

public getEditedFile(file: File) {
    
}