charlee2025 / ngx-m-img-cropper

a mobile image cropper

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

Demo

Live Demo

Dependencies

• Angular (requires Angular 8 or higher, tested with 8.0.3)
• hammerjs (requires 2.0.8 or higher)

Installation

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

import hammerjs in main.ts

import 'hammerjs';

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>

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)

end

ngx-m-img-cropper's Issues

扫二维码，这个在ios12上第二次选择同一张照片，裁剪页面是不会出来，除非换一张照片，然后再换回来，安卓没有没有这个问题