CropperJS 中获取缩放后画布选区原始坐标的方法

在图像裁剪库 CropperJS 的使用过程中，开发者经常会遇到需要获取选区原始坐标的需求，特别是在画布经过缩放变换后。本文将详细介绍如何正确计算选区在原始图像中的坐标位置。

理解画布变换原理

当 CropperJS 的画布（canvas）经过缩放变换后，所有在画布上的坐标和尺寸都会受到影响。要获取选区在原始图像中的真实坐标，需要理解以下几个关键概念：

1. 变换矩阵：CropperJS 内部使用变换矩阵来处理图像的缩放、旋转等操作
2. 实际尺寸：图像经过变换后在画布上显示的实际尺寸
3. 坐标偏移：变换后图像在画布上的位置偏移量

计算方法

获取图像变换信息

首先需要获取图像的变换矩阵，这可以通过 CropperJS 的内部方法 $getTransform() 实现。变换矩阵包含以下信息：

[a, b, c, d, e, f]

其中：

• a 和 d 表示水平和垂直缩放比例
• e 和 f 表示水平和垂直位移

计算实际图像尺寸

根据变换矩阵，可以计算出图像在画布上的实际显示尺寸：

const imageActualWidth = originalImageWidth * matrix[0];
const imageActualHeight = originalImageHeight * matrix[3];

计算实际图像位置

变换后的图像在画布上的位置需要考虑缩放后的中心点偏移：

const imageActualX = matrix[4] + (originalImageWidth - imageActualWidth) / 2;
const imageActualY = matrix[5] + (originalImageHeight - imageActualHeight) / 2;

转换选区坐标

有了上述信息后，就可以将画布上的选区坐标转换为原始图像坐标：

const scaleX = imageActualWidth / originalImageWidth;
const scaleY = imageActualHeight / originalImageHeight;
const originalX = (selectionX - imageActualX) / scaleX;
const originalY = (selectionY - imageActualY) / scaleY;
const originalWidth = selectionWidth / scaleX;
const originalHeight = selectionHeight / scaleY;

完整示例代码

以下是完整的计算函数示例：

function getOriginalSelection(cropperImage, cropperSelection) {
  // 获取变换矩阵
  const matrix = cropperImage.$getTransform();
  
  // 计算实际图像尺寸和位置
  const originalWidth = cropperImage.$image.width;
  const originalHeight = cropperImage.$image.height;
  const imageActualWidth = originalWidth * matrix[0];
  const imageActualHeight = originalHeight * matrix[3];
  const imageActualX = matrix[4] + (originalWidth - imageActualWidth) / 2;
  const imageActualY = matrix[5] + (originalHeight - imageActualHeight) / 2;

  // 计算缩放比例
  const scaleX = imageActualWidth / originalWidth;
  const scaleY = imageActualHeight / originalHeight;

  // 转换选区坐标
  return {
    x: (cropperSelection.x - imageActualX) / scaleX,
    y: (cropperSelection.y - imageActualY) / scaleY,
    width: cropperSelection.width / scaleX,
    height: cropperSelection.height / scaleY
  };
}

注意事项

1. 该方法适用于 CropperJS v2 版本，v1 版本的实现可能有所不同
2. 如果图像有旋转操作，需要额外考虑旋转角度的影响
3. 计算结果可能需要取整处理，取决于具体使用场景
4. 在实际应用中，建议对计算结果进行范围检查，确保不会超出图像范围

通过以上方法，开发者可以准确地获取经过缩放变换后的选区在原始图像中的坐标位置，为后续的图像处理操作提供准确的数据基础。