reactjs - 使用 react-image-crop blob url 的多个图像裁剪器在下载时损坏

Question

库/框架 - React JS 和 react-image-crop ( https://codesandbox.io/s/72py4jlll6 )

使用 react-image-crop 我正在尝试为“多个图像”实现相同的功能。但是，会为所有裁剪的图像生成 blob 图像 url，但除了最后一个裁剪的图像之外，所有其他 url 在下载时都已损坏。我尝试了很多调试和探索，但找不到解决此问题的合适方法。

代码片段： -

  getCroppedImg(image, crop, fileName) {
    const canvas = document.createElement("canvas");
    const scaleX = image.naturalWidth / image.width;
    const scaleY = image.naturalHeight / image.height;
    canvas.width = crop.width;
    canvas.height = crop.height;
    const ctx = canvas.getContext("2d");

    ctx.drawImage(
      image,
      crop.x * scaleX,
      crop.y * scaleY,
      crop.width * scaleX,
      crop.height * scaleY,
      0,
      0,
      crop.width,
      crop.height
    );

任何帮助将不胜感激。

谢谢

标签： reactjsreact-image-crop