ngx-image-editor
Awesome editor for Angular 6 based on Angular Material
Getting started
Step 1: Install Angular Material (+ Material Icons) and Angular Flex Layout
Step 2: Install cropperjs
yarn add cropperjsStep 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-editorStep 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
| 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) |
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 |
