javascript - 角度7:如何使用裁剪或其他裁剪器

我创建了一个图库页面，在其中拍照。现在，我正在尝试为图像添加裁剪选项，我想使用croppie，但不了解如何在角度7中使用它？

任何其他的种植选择或建议，将不胜感激。

最佳答案

您可以使用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]);
}