Reactjs обрезка изображения

Question

Сейчас я пытаюсь сделать так, чтобы пользователь загрузил изображение, обрезал его до нужных мне размеров, затем взял это новое изображение и загрузил его на мой сервер.

Я использую реагирующее обрезание изображения для обрезки, и я могу это сделать, однако, когда я пытаюсь получить новое изображение, оно отображается как весь черный. Я не могу использовать размеры в пикселях, поэтому я использую процент обрезки, который обеспечивает пакет.

Вот моя функция, которая берет исходное изображение 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);
}

Это вернет правильные размеры и сможет нормально читать исходное изображение, но содержимое нового изображения выглядит черным, и я не уверен, почему , Есть идеи?

Answer 1

Проблема заключалась в том, что я не отображал холст в разметке. Не знал, что он должен отображаться для правильного создания dataURL