javascript - Angular 7 : How to Use croppie or any other 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]);
}