Image Cropping with 8/3 Aspect Ratio Causing Loss of Half Portion After Retrieval for s3 about react-image-crop HOT 2 CLOSED

import { PixelCrop } from "react-image-crop";
export async function canvasPreview(
  image: HTMLImageElement,
  canvas: HTMLCanvasElement,
  crop: PixelCrop,
  scale = 1,
) {
  const ctx = canvas.getContext("2d");

  if (!ctx) {
    throw new Error("No 2d context");
  }

  const scaleX = image.naturalWidth / image.width;
  const scaleY = image.naturalHeight / image.height;

  const pixelRatio = window.devicePixelRatio;

  canvas.width = Math.floor(crop.width * scaleX * pixelRatio);
  canvas.height = Math.floor(crop.height * scaleY * pixelRatio);

  ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
  ctx.imageSmoothingQuality = "high";

  const cropX = crop.x * scaleX;
  const cropY = crop.y * scaleY;
  const centerX = image.naturalWidth / 2;
  const centerY = image.naturalHeight / 2;
  ctx.fillStyle = "white";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.save();

  ctx.translate(-cropX, -cropY);

  ctx.translate(centerX, centerY);
  ctx.scale(scale, scale);
  ctx.translate(-centerX, -centerY);
  const imageObj = new Image();
  imageObj.crossOrigin = "Anonymous";
  imageObj.onload = () => {
    ctx.drawImage(
      imageObj,
      0,
      0,
      image.naturalWidth,
      image.naturalHeight,
      0,
      0,
      image.naturalWidth,
      image.naturalHeight,
    );

    ctx.restore();
  };
  imageObj.src = image.src;
}

previewCanvasRef?.current?.toBlob(
        (blob) => {
          const file = new File([blob], imageName, {
            type: mimeTypes[fileExtension],
          });

          if (handleCropImageSave) {
            handleCropImageSave(file);
            onclose();
          }
        },
        mimeTypes[fileExtension],
        0.9,
      );