How do you set Final image size / scale?

[alanjohnson]

I am trying to set the final image size after cropping. I.e. I want the final image to be 140px x 190px.

• I set a 140x190 aspect ration so the crop area is the right dimension
  but when a user adds a 2000x2000 image and crops it, the result is only respecting the aspect ratio, not actually scaling the final result to be 140px x 190px.

[ValentinH]

What code are you using to crop the image and get the final image?

[alanjohnson]

I am Using the getCroppedImg code from the "Example with image selected by the user (+ auto-rotation for phone pictures)" example. I just altered the return to get the arrayBuffer I needed.

export async function getCroppedImg (
  imageSrc,
  type,
  pixelCrop,
  rotation = 0,
  flip = { horizontal: false, vertical: false }
) {
  const image = await createImage(imageSrc);
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  if (!ctx) {
    return null;
  }

  const rotRad = getRadianAngle(rotation);

  // calculate bounding box of the rotated image
  const { width: bBoxWidth, height: bBoxHeight } = rotateSize(
    image.width,
    image.height,
    rotation
  );

  // set canvas size to match the bounding box
  canvas.width = bBoxWidth;
  canvas.height = bBoxHeight;

  // translate canvas context to a central location to allow rotating and flipping around the center
  ctx.translate(bBoxWidth / 2, bBoxHeight / 2);
  ctx.rotate(rotRad);
  ctx.scale(flip.horizontal ? -1 : 1, flip.vertical ? -1 : 1);
  ctx.translate(-image.width / 2, -image.height / 2);

  // draw rotated image
  ctx.drawImage(image, 0, 0);

  const croppedCanvas = document.createElement('canvas');

  const croppedCtx = croppedCanvas.getContext('2d');

  if (!croppedCtx) {
    return null;
  }

  // Set the size of the cropped canvas
  croppedCanvas.width = pixelCrop.width;
  croppedCanvas.height = pixelCrop.height;

  // Draw the cropped image onto the new canvas
  croppedCtx.drawImage(
    canvas,
    pixelCrop.x,
    pixelCrop.y,
    pixelCrop.width,
    pixelCrop.height,
    0,
    0,
    pixelCrop.width,
    pixelCrop.height
  );

  const base64DataUrl = croppedCanvas.toDataURL(type);
  const blob = await new Promise((resolve, reject) => {
    croppedCanvas.toBlob((file) => {
      resolve(URL.createObjectURL(file));
    }, type);
  });
  const arrayBuffer = await (await fetch(base64DataUrl)).arrayBuffer();
  return {
    arrayBuffer,
    base64: base64DataUrl,
    blob
  };
}

[ValentinH]

Here's an example where we force the final image width to be 300px: https://codesandbox.io/p/sandbox/react-easy-crop-demo-with-cropped-output-forked-l9xmfs?file=%2Fsrc%2FcropImage.js%3A71%2C21

The trick for this is to use the first parameter of the onCropComplete callback which is using percentage values.
Then, I've slightly adjusted the getCroppedImg function to use percentage values and force the final image dimensions.

[alanjohnson]

This looks great, thanks! one thing I did notice though is that if you rotate the image, the positioning gets thrown off (can be seen in your example as well). Looks like the rotated image bounding box needs to be accounted for in the new scaled calculation (using bBoxWidth/bBoxHeight instead of image.width/height)

  const targetWidth = cropSize ? (croppedArea.width / 100) * bBoxWidth : croppedArea.width;
  const targetHeight = cropSize ? (croppedArea.height / 100) * bBoxHeight : croppedArea.height;
  const targetX = cropSize ? (croppedArea.x / 100) * bBoxWidth : croppedArea.x;
  const targetY = cropSize ? (croppedArea.y / 100) * bBoxHeight : croppedArea.y;

  const finalWidth = cropSize ? cropSize.width : croppedArea.width;
  const finalHeight = cropSize ? (targetHeight * finalWidth) / targetWidth : croppedArea.height;

[ValentinH]

Indeed, this is a good point.