Konva对已缩放的图片执行裁剪时图片还原原尺寸的解决方法

问题现象 #

• 原始尺寸为394×387的图片加载后，默认缩放至200×200区域正常显示：
• 裁剪8px宽度时，图片回退为原始尺寸比例，192×200的显示区域内呈现386×387的错误裁剪结果：

问题根因 #

Konva.Image的所有裁剪参数（cropX/cropY/cropWidth/cropHeight）都是基于图片资源的原始像素尺寸计算，和Konva节点设置的显示层宽高没有直接关联。
原有代码存在两个错误：

1. 直接修改原生Image对象的width/height属性无效，Konva读取图片原始尺寸时取的是naturalWidth/naturalHeight，这两个值不会被手动修改
2. 裁剪时直接拿显示层的宽高差值作为裁剪参数传入，没有做显示尺寸到原始像素的比例换算，导致裁剪区域计算错误，触发尺寸回退

修复方案 #

核心逻辑：初始化图片时记录原始尺寸、显示尺寸和原始尺寸的缩放比，所有裁剪参数先按缩放比换算为原始图片对应的像素值再传入，裁剪后同步更新显示尺寸即可。该方案同时兼容默认缩放的图片、后续手动调整过尺寸的图片场景。

修正后代码 #

1. 图片添加逻辑修正：

addItem = (imgUrl) => {
    const img = new window.Image();
    img.onload = () => {
      const displayWidth = 200;
      const displayHeight = 200;
      // 获取图片真实原始像素尺寸
      const originWidth = img.naturalWidth;
      const originHeight = img.naturalHeight;
      const newImg = new Konva.Image({ 
        width: displayWidth, 
        height: displayHeight, 
        image: img, 
        draggable: true,
        // 自定义属性存储计算所需的原始尺寸、缩放比
        originWidth,
        originHeight,
        imgScaleX: displayWidth / originWidth,
        imgScaleY: displayHeight / originHeight
      });
      this.layer.add(newImg);
      this.layer.draw();
    };
    img.src = imgUrl;
}

2. 裁剪逻辑修正：

cropItem = (item) => {
    // 读取预存的原始尺寸、缩放比
    const { imgScaleX, imgScaleY } = item.attrs;
    // 显示层要裁剪的宽度差值，换算为原始图片对应的像素差值
    const cropDisplayDelta = 8;
    const cropOriginDeltaX = cropDisplayDelta / imgScaleX;

    // 所有裁剪参数使用原始图片像素值计算
    item.crop({
      x: item.cropX() + cropOriginDeltaX,
      y: item.cropY(),
      width: (item.width() - cropDisplayDelta) / imgScaleX,
      height: item.height() / imgScaleY
    });

    // 更新显示层宽度
    item.width(item.width() - cropDisplayDelta);
    this.layer.draw();
}

扩展适配 #

如果后续支持手动拖拽调整图片大小，只需要在resize事件回调里，同步更新节点上存储的imgScaleX/imgScaleY值（值为当前显示宽高/原始宽高），裁剪逻辑不需要做任何修改即可正常工作。

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