❤
npm
Sign UpSign In

ngx-image-editor
TypeScript icon, indicating that this package has built-in type declarations

1.4.1 • Public • Published

ngx-image-editor

Awesome editor for Angular 6 based on Angular Material

npm version Build Status

Live Demo on Slackblitz

Getting started

Step 1: Install Angular Material (+ Material Icons) and Angular Flex Layout
Step 2: Install cropperjs
    npm install --save 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:
     npm install --save 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

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
Hristo Georgiev Taulant Disha

Readme

Keywords

Package Sidebar

Install

npm i ngx-image-editor

Repository

github.com/Centroida/ngx-image-editor

Homepage

github.com/Centroida/ngx-image-editor

Weekly Downloads

24

Version

1.4.1

License

MIT

Unpacked Size

228 kB

Total Files

16

Last publish

Collaborators

  • kaizeras
  • tao.disha
Try on RunKit
Report malware