Javascript 裁剪图像

现在我要做的是让用户上传一张图片，裁剪出适合我需要的尺寸，然后把新图片上传到我的服务器上

我正在使用react image crop进行裁剪，我可以这样做，但是，当我尝试获取新图像时，它显示为全黑。我不能使用像素尺寸，所以我使用软件包提供的百分比裁剪

下面是我的函数，它接收原始的base64图像，创建一个具有新维度的不可见画布，将画布转换为另一个base64图像，然后返回它

export function getCroppedImage(image64, crop, extension) {
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  const image = new Image();
  image.src = image64;
  canvas.width = crop.width * image.width * 0.01;
  canvas.height = crop.height * image.height * 0.01;
  image.onload = function() {
    ctx.drawImage(
      image,
      crop.x * image.width * 0.01,
      crop.y * image.height * 0.01,
      crop.width * image.width * 0.01,
      crop.height * image.height * 0.01,
      0,
      0,
      crop.width * image.width * 0.01,
      crop.height * image.height * 0.01
    );
  };
  if (crop.width !== 0) return canvas.toDataURL("image/" + extension);
}

---

这将返回正确的尺寸，并且能够很好地读取原始图像，但是新图像的内容显示为黑色，我不知道为什么。有什么想法吗？

问题是我没有在标记中实际显示画布。不知道为了正确创建dataURL必须显示它

所有的*0.01是怎么回事？百分比是58%，而不是0.58。不过我解决了这个问题