Angular4中使用ngx-image-cropper获取原图尺寸及裁剪区域坐标

我来帮你梳理一下在Angular 4里用ngx-image-cropper获取这些信息的具体方法，都是实际项目里常用的操作：

一、获取原始图片的实际大小、宽度和高度 #

1. 获取原始宽高 #

当图片成功加载到裁剪器时，imageLoaded事件会返回包含原始图片尺寸的对象，我们可以直接从中提取宽高：

模板代码：

<image-cropper
  [imageBase64]="imageBase64"
  (imageLoaded)="onImageLoaded($event)"
  [maintainAspectRatio]="true"
  [aspectRatio]="4 / 3"
></image-cropper>

组件类代码：

import { ImageCroppedEvent } from 'ngx-image-cropper';

// ...

onImageLoaded(imageInfo: ImageCroppedEvent) {
  // 原始图片的宽度（像素）
  const originalWidth = imageInfo.original.width;
  // 原始图片的高度（像素）
  const originalHeight = imageInfo.original.height;
  
  console.log('原始图片宽度:', originalWidth);
  console.log('原始图片高度:', originalHeight);
}

2. 获取图片文件实际大小 #

图片的文件大小需要在用户选择文件时从File对象中获取，ngx-image-cropper的加载事件不会返回这个信息。比如通过文件选择框获取：

模板代码：

<input type="file" (change)="onFileSelected($event)" accept="image/*">

组件类代码：

onFileSelected(event: Event) {
  const file = (event.target as HTMLInputElement).files[0];
  if (!file) return;
  
  // 文件大小（字节）
  const fileSizeBytes = file.size;
  // 转换为KB
  const fileSizeKB = file.size / 1024;
  // 转换为MB
  const fileSizeMB = file.size / (1024 * 1024);
  
  console.log('图片文件大小:', fileSizeMB.toFixed(2) + ' MB');
  
  // 这里可以把文件转为base64传给裁剪器
  const reader = new FileReader();
  reader.onload = (e) => {
    this.imageBase64 = e.target.result as string;
  };
  reader.readAsDataURL(file);
}

二、获取裁剪区域的坐标（x1、y1、x2、y2） #

裁剪区域的坐标可以通过两种方式获取：实时监听裁剪区域变化，或者裁剪完成后获取。

1. 实时监听裁剪区域坐标 #

使用cropChange事件，每次裁剪区域调整时都会触发，适合需要实时同步坐标的场景：

模板代码：

<image-cropper
  [imageBase64]="imageBase64"
  (imageLoaded)="onImageLoaded($event)"
  (cropChange)="onCropChange($event)"
  [maintainAspectRatio]="true"
  [aspectRatio]="4 / 3"
></image-cropper>

组件类代码：

onCropChange(cropInfo: ImageCroppedEvent) {
  const cropRect = cropInfo.cropperPosition;
  
  // 左上角坐标（x1, y1）
  const x1 = cropRect.x;
  const y1 = cropRect.y;
  // 右下角坐标（x2, y2）= 左上角坐标 + 裁剪区域宽高
  const x2 = cropRect.x + cropRect.width;
  const y2 = cropRect.y + cropRect.height;
  
  console.log('裁剪区域实时坐标：');
  console.log('左上角(x1,y1):', x1, y1);
  console.log('右下角(x2,y2):', x2, y2);
}

2. 裁剪完成后获取坐标 #

如果只需要在用户确认裁剪后获取坐标，可以调用裁剪器的crop()方法，在返回结果中提取：

首先需要通过ViewChild获取裁剪器实例：

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

@Component({
  // ... 组件元数据
})
export class YourComponent {
  @ViewChild(ImageCropperComponent) imageCropper: ImageCropperComponent;
  imageBase64: string;
  
  // ... 其他方法
}

然后添加裁剪按钮和对应的方法：

模板代码：

<button (click)="cropImage()">确认裁剪</button>

组件类代码：

cropImage() {
  this.imageCropper.crop().then((cropResult: ImageCroppedEvent) => {
    const cropRect = cropResult.cropperPosition;
    
    const x1 = cropRect.x;
    const y1 = cropRect.y;
    const x2 = cropRect.x + cropRect.width;
    const y2 = cropRect.y + cropRect.height;
    
    console.log('裁剪完成后的坐标：');
    console.log('x1:', x1, 'y1:', y1);
    console.log('x2:', x2, 'y2:', y2);
    
    // 这里还可以获取裁剪后的图片，比如base64或blob
    // const croppedImageBase64 = cropResult.base64;
    // const croppedImageBlob = cropResult.blob;
  });
}

注意：这里的坐标都是相对于原始图片的像素值，如果需要相对于裁剪器容器的坐标，需要结合容器尺寸和原图缩放比例进行换算，不过大多数业务场景下，相对于原图的坐标就足够了。

内容的提问来源于stack exchange，提问作者Mansoor Ahmed