未捕获类型错误：getImage.crop 不是函数

Question

我收到此错误的代码是：

const crop = imageSrc.crop({
  x: value.x / ratio_w,
  y: value.y / ratio_h,
  width: value.width / ratio_w,
  height: value.height / ratio_h,
});

当我尝试获取带有图像区域的 x、y、宽度和高度坐标的子图像时，出现此错误。我在那里声明

const [imageSrc, setImageSrc] = useState(null)

我在这里更新 imageSrc 的值：

const handleImageChange = (event) => {
  const file = event.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onloadend = () => {
      setImageSrc(reader.result);
    };
    reader.readAsDataURL(file);
  }
};

根据Konva的文档，有说明：

// get crop
var crop = image.crop();

我在 konva 的仓库中询问，但没有人回答我的问题。

Answer 1

来自 FileReader 的文档：readDataAsURL()...

结果属性包含作为 data: URL 的数据，将文件数据表示为 base64 编码字符串。

这是一个字符串，而不是Konva.Image。

您需要使用 Konva.Image.fromURL() 之类的方法加载结果，然后才能使用

crop()

等方法

reader.onloadend = () => {
  Konva.Image.fromURL(reader.result, setImageSrc, console.error);
};