Awesome editor for Angular 5 based on Angular Material
npm install --save @angular/material
npm install --save @angular/flex-layout
npm install --save cropperjs
{
"styles": [
"../node_modules/cropperjs/dist/cropper.css"
],
"scripts": [
"../node_modules/cropperjs/dist/cropper.js"
]
}
@Input() config: EditorOptions
@Output() close: EventEmitter
@Output() file: EventEmitter
npm install --save ngx-image-editor
import {NgxImageEditorModule} from "ngx-image-editor";
@NgModule({
imports: [
NgxImageEditorModule
]
})
- 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 eitherImageUrl
orFile
.
<!--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) {
}
- Make close button optional.
- Add support for fullscreen and make width of image placehoder to be auto.