React中使用Konva裁剪图片遇Uncaught TypeError错误求助

问题根源 #

你当前存储在imageSrc里的是FileReader返回的dataURL字符串，而Konva文档中调用crop()方法的image是Konva.Image实例或原生HTMLImageElement，字符串类型没有crop方法，因此触发该错误。

解决方案 #

方案1：使用Konva.Image实例调用crop方法

1. 调整state存储类型，改为保存Konva.Image实例：

const [konvaImage, setKonvaImage] = useState(null);

2. 修改图片加载逻辑，将dataURL转为HTMLImageElement后创建Konva.Image实例：

const handleImageChange = (event) => {
  const file = event.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onloadend = () => {
      const img = new Image();
      img.src = reader.result;
      img.onload = () => {
        const konvaImg = new Konva.Image({
          image: img,
          width: img.width,
          height: img.height
        });
        setKonvaImage(konvaImg);
      };
    };
    reader.readAsDataURL(file);
  }
};

3. 调用crop方法并更新舞台：

if (konvaImage) {
  // 设置裁剪参数
  konvaImage.crop({
    x: value.x / ratio_w,
    y: value.y / ratio_h,
    width: value.width / ratio_w,
    height: value.height / ratio_h,
  });
  // 触发图层重绘，显示裁剪效果
  konvaImage.getLayer().draw();
}

方案2：用Canvas直接裁剪图片（无需Konva实例）

如果仅需获取裁剪后的子图而非在Konva舞台展示，可直接用Canvas实现：

const cropImage = (img, x, y, width, height) => {
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d');
  // 绘制裁剪区域到Canvas
  ctx.drawImage(img, x, y, width, height, 0, 0, width, height);
  return canvas.toDataURL(); // 返回裁剪后的图片dataURL
};

// 在图片加载完成后调用
const handleImageChange = (event) => {
  const file = event.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onloadend = () => {
      const img = new Image();
      img.src = reader.result;
      img.onload = () => {
        const croppedSrc = cropImage(
          img,
          value.x / ratio_w,
          value.y / ratio_h,
          value.width / ratio_w,
          value.height / ratio_h
        );
        // 后续可使用croppedSrc
      };
    };
    reader.readAsDataURL(file);
  }
};

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