ngx-m-img-cropper

ngx-m-img-cropper - Angular Mobile Image Crop

Demo

Live Demo

Dependencies

• Angular (requires Angular 4 or higher, tested with 4.4.6)
• hammerjs (requires 2.0.8 or higher)

Installation

npm i hammerjs
npm i ngx-m-img-cropper

add hammerjs script in angular.json

"scripts": [
              "./node_modules/hammerjs/hammer.js", ...
            ]

Once installed you need to import the main module:

import {ImgCropperModule} from 'ngx-m-img-cropper';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [ImgCropperModule, ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

the cropped image 's background color is green, you can change it by provide a MCropParams

 providers: [
    {provide: MCropParams, useValue: {backgroundColor: '#f0f0f0'}}, ...
  ]

add the m-img-cropper componet to your app.component.html

<m-img-cropper></m-img-cropper>

Other modules in your application can simply import NgxImgModule:

import { NgxImgModule } from 'ngx-img';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgxImgModule, ...], 
})
export class OtherModule {
}

Usage

use it like this:

import { Component, OnInit } from '@angular/core';
import {ImgCropperService} from 'ngx-m-img-cropper';

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: ['...']
})
export class Mine1Component implements OnInit {

  imgsrc = 'assets/header.jpg';
  constructor(private imgCropperService: ImgCropperService) { }

  ngOnInit() {
  }
  click(): void {
    this.imgCropperService.getCropImgData({width: 400, height: 300})
      .then(data => {
        this.imgsrc = data;
      });
  }

License

MIT License (MIT)