裁剪图像时的角度性能问题

Posted 2023-02-25

【中文标题】裁剪图像时的角度性能问题

【英文标题】：Angular performance issues when cropping image

【发布时间】：2020-06-15 00:15:02

【问题描述】：

我正在使用 this component 来裁剪图像，作为 ionic/angular8 项目的一部分，但我遇到了严重的性能问题，导致应用程序有时反应迟钝，这仅在从移动设备、桌面版本运行时表现出来没有显示任何问题，裁剪效果很好。

在某些情况下进行性能评估时，我会看到这些垃圾回收；我来自java世界，GC总是一个性能问题，但没有找到太多关于它的东西，但我认为它不是问题的根源：

这是另一个示例，似乎是用户与屏幕交互与调用我的内部方法之间的延迟，您可以看到有一个 FunctionCall，但是是哪个函数。

我的通用代码与网站中的几乎相同，但我会在这里分享：

html：

<div class="popup-form-container ion-text-center ion-padding">
<image-cropper
      [imageChangedEvent]="imageChangedEvent"
      [maintainAspectRatio]="true"
      [aspectRatio]="4 / 4"
      format="png"
      (imageCropped)="imageCropped($event)"
      (imageLoaded)="imageLoaded()"
      (cropperReady)="cropperReady()"
      (loadImageFailed)="loadImageFailed()"
  ></image-cropper>
  <ion-button fill="clear" color="danger" (click)="close()">Cancelar</ion-button>
  <ion-button color="green" (click)="save()">Guardar</ion-button>
</div>

在这里你可以看到我的课程，我在查找问题的过程中添加了一堆控制台日志，我看到的是当应用程序冻结并停留在长调用中时，没有输出，然后从souden出来，连续很多：

    @Component(
  selector: 'app-crop-image-popover',
  templateUrl: './crop-image-popover.component.html',
  styleUrls: ['./crop-image-popover.component.scss',
              '../../text-area/text-edit-popover/text-edit-popover.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
)
export class CropImagePopoverComponent implements OnInit 

  @Input()
  imageChangedEvent: any;

  private croppedImage: any = '';
  private uploader: FileUploader;
  private imageUrl: any;
  private errors: any;

  constructor(private modalCtrl: ModalController,
              private commonSrv: CommonService,
              protected cloudinary: Cloudinary,
              private alertCtrl: AlertController,
              private sysParamsSrv: SystemParamsService,
              private base64: Base64,
              private domSanitizer: DomSanitizer,
              private imageCompress: NgxImageCompressService,
              private changeDetector: ChangeDetectorRef) 
    // Inicializamos el compoente de carga de archivos

  

  ngOnInit() 

  imageCropped(event: ImageCroppedEvent) 
    console.log('cropped');
    this.croppedImage = event.base64;
  
  imageLoaded() 
    console.log('loaded');
    // show cropper
//     this.commonSrv.hideSpinner();
  
  cropperReady() 
    // cropper ready
    console.log('ready');
    this.commonSrv.hideSpinner();
  
  loadImageFailed() 
    // show message
    console.log('failed');
  

  close() 
    this.modalCtrl.dismiss();
  

我已经尝试过更新 changeDetection 策略，删除了我在其他页面中的一些函数调用，以及大部分性能建议，但我似乎没有找到我当前问题的原因

【问题讨论】：

你调试的怎么样了？在什么设备/什么平台上？

嗨@AluanHaddad，我在摩托罗拉 g6 和 g7 上运行具有相同的行为，我使用 chrome 工具和 ADB 进行调试，在浏览器上运行时我没有看到延迟

我也有同样的问题，加载小图会很流畅，但是加载高分辨率图片时手机浏览器会卡住。

【参考方案1】：

ngx-image-cropper，当您更改裁剪大小/位置时，它实际上会裁剪图像并且非常耗费资源。如果你能侥幸成功，你只能通过将autoCrop 设置为 false 来进行一次裁剪，如下所示：

<image-cropper
    [imageChangedEvent]="imageChangedEvent"
    [maintainAspectRatio]="true"
    [aspectRatio]="1"
    [autoCrop]="false"
    format="png"
    (imageLoaded)="imageLoaded()"
    (cropperReady)="cropperReady()"
    (loadImageFailed)="loadImageFailed()"
></image-cropper>
<ion-button fill="clear" color="danger" (click)="close()">Cancelar</ion-button>
<ion-button color="green" (click)="save()">Guardar</ion-button>

然后使用@ViewChild 访问裁剪器和裁剪方法。这是打字稿文件中的内容：

@ViewChild(ImageCropperComponent) imageCropper: ImageCropperComponent;

然后，当用户选择保留裁剪时，您需要执行以下操作：

function save(): void 
  const event = this.imageCropper.crop();
  this.croppedImage = event.base64;

这将解决一些性能问题。但请注意，iDevices 似乎很难以ngx-image-cropper 的方式处理裁剪。具体来说，如果用户在上传图像时使用相机，图像可能需要太多内存才能在 Safari 线程中转换为 base64 字符串 - 因此，iDevices 在正常使用时可能会冻结。这是一个讨论这个问题的地方：https://github.com/Mawi137/ngx-image-cropper/issues/481