Angular 7：如何使用croppie或任何其他cropper

Question

我创建了一个画廊页面，我正在其中拍摄图像。现在我正在尝试为图像添加裁剪选项，我想使用 croppie 但不明白如何在 Angular 7 中使用它？

任何其他裁剪选项或建议将不胜感激。

Answer 1

你可以使用croppie js。

HTML ==> <div id="croppie" #croppie></div> 

TS 代码：

// import croppie 
import * as Croppie from 'croppie';

// Take Element Ref
@ViewChild('croppie') croppie: ElementRef; 
// or you can use using document.getElementById('croppie')
croppieObj; // global obj

onFileChange() {
   if (this.croppie && this.croppie.nativeElement.className === 'croppie-container') {
       this.croppieObj.destroy();
   }

   this.croppieObj = new Croppie(document.getElementById('croppie'), {
   viewport: {
     width: 200,
     height: 200
   },
   boundary: {
     width: auto,
     height: 300
   },
   enableResize: true,
   enableExif: true,
   });

   f.onload = (e1: any) => {
   this.croppieObj.bind(
    {
      url: e1.target.result,
    }
  );
 };

 f.readAsDataURL(event.target.files[0]);
} 

Answer 2

你可以使用ngx-image-cropper

相关TS：

import { Component, ViewChild } from '@angular/core';
import { ImageCroppedEvent, ImageCropperComponent } from 'ngx-image-cropper';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  @ViewChild(ImageCropperComponent) imageCropper: ImageCropperComponent;

  constructor() { }
  imageChangedEvent: any = '';
  croppedImage: any = '';

  fileChangeEvent(event: any): void {
    this.imageChangedEvent = event;
  }
  imageCropped(event: ImageCroppedEvent) {
    this.croppedImage = event.base64;
  }
  cropIt(evnt) {
    console.log(this.croppedImage);
  }

}

相关HTML：

<input type="file" (change)="fileChangeEvent($event)" />

<image-cropper
    [imageChangedEvent]="imageChangedEvent"
    [maintainAspectRatio]="true"
    [aspectRatio]="4 / 3"
    [resizeToWidth]="128"
    format="png"
    (imageCropped)="imageCropped($event)"
    (imageLoaded)="imageLoaded()"
    (cropperReady)="cropperReady()"
    (loadImageFailed)="loadImageFailed()"
></image-cropper>

<img [src]="croppedImage" />

<button type="button" (click)="cropIt()">save cropped image in Base64 </button>

工作stackblitz here