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

``bash
npm install --save cropperjs
`
##### Step 3: Add cropperjs file paths in your .angular.json

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


##### Step 4: Install ngx-image-editor:
`bash
npm install --save ngx-image-editor
`

##### Step 5: Import the NgxImageEditorModule within your app:
`js
import {NgxImageEditorModule} from "ngx-image-editor";

@NgModule({
imports: [
NgxImageEditorModule
]
})
`


##### Step 6: Use within your application:
`html

`

$3

| Property | Description |
| -------------- | -------------------------------------------------------------- |
| [config] | An object containing editor configuration (see Configuration) |
| (file) | The emitted file after editing. |


#### Configuration
| Property | Description |
| -------------- | -------------------------------------------------------------- |
| ImageName | Name of the image. |
| ImageUrl | URL of the image (if it coming from a CDN) . |
| File | File object of the image (if it is being uploaded through the browser. |
| ImageType | Type of the image (default is image/jpeg). |
| AspectRatios | Array of aspect ratios. Available options: 0:0, 1:1 , 2:3 ,4:3, 16:9l . (default is 0:0) |

$3

`typescript

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

,

})
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.
}
}


``

$3

|  |  |
|---------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------|
| Hristo Georgiev | Taulant Disha |