ngx-cropper如何设置裁剪区域初始尺寸与左上角位置

解决方案 #

你之前的配置不生效有三个核心原因：

1. 配置了cropperStaticHeight和cropperStaticWidth属性，这两个属性会强制裁剪框为固定尺寸，既无法自由调整大小，也会覆盖cropper属性的坐标配置
2. 直接在组件初始化时给cropperPosition赋值，没有等到cropperReady事件触发，此时裁剪器还未完成初始化，配置不会生效
3. 写死125*100的固定尺寸，不同大小的图片无法实现占比1/6的效果，需要根据实际加载的图片尺寸动态计算裁剪框大小

按照以下步骤修改即可实现需求： #

1. 修改模板配置

删除静态宽高属性，新增cropper属性绑定：

<image-cropper
  [imageChangedEvent]="imageChangedEvent"
  [maintainAspectRatio]="false"
  [resizeToWidth]="0"
  [cropper]="cropperPosition"
  format="png"
  (imageCropped)="imageCropped($event)"
  (imageLoaded)="imageLoaded($event)"
  (cropperReady)="cropperReady()"
  (loadImageFailed)="loadImageFailed()"
></image-cropper>

2. 修改组件逻辑代码

先获取加载完成的原图尺寸，等裁剪器初始化完成后再动态计算裁剪框坐标并赋值：

import { CropperPosition, ImageCroppedEvent, LoadedImage } from 'ngx-image-cropper';

// 组件内定义变量
cropperPosition: CropperPosition;
loadedImgWidth: number;
loadedImgHeight: number;

// 图片加载完成回调，获取原图实际尺寸
imageLoaded(event: LoadedImage) {
  this.loadedImgWidth = event.original.size.width;
  this.loadedImgHeight = event.original.size.height;
}

// 裁剪器初始化完成回调，设置初始裁剪框坐标
cropperReady() {
  // 宽取原图1/3、高取原图1/2，面积刚好为原图的1/6
  const cropWidth = Math.floor(this.loadedImgWidth / 3);
  const cropHeight = Math.floor(this.loadedImgHeight / 2);
  // 必须创建全新的CropperPosition对象，变更检测才会触发配置生效
  this.cropperPosition = {
    x1: 0,
    y1: 0,
    x2: cropWidth,
    y2: cropHeight
  };
}

修改完成后，裁剪框初始会位于图片左上角，面积约为图片的1/6，同时支持自由调整大小和位置，完全符合需求。

内容的提问来源于stack exchange，提问作者Siobhan Holubicka