getCroppedImg function in the FAQ section loses resolution

See the screenshot below which was cropped from a very high res image and run through the example function:

We were able to modify the function like so to not lose quality (while limiting the final size of the image):

export const getBlobFromCroppedImage = (image, crop, maxHeight) => {
  const canvas = document.createElement('canvas');
  console.warn(image.naturalWidth, image.naturalHeight);
  const scaleX = image.naturalWidth / image.width;
  const scaleY = image.naturalHeight / image.height;
  const aspectRatio = crop.width/crop.height;

  let canvasHeight = crop.height * scaleY;
  let canvasWidth = crop.width * scaleX;

  if (maxHeight && (canvasHeight > maxHeight)) {
    canvasHeight = maxHeight;
    canvasWidth = Math.round(canvasHeight * aspectRatio);
  }

  canvas.height = canvasHeight;
  canvas.width = canvasWidth;

  const ctx = canvas.getContext('2d');

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

  return new Promise((resolve) => {
    canvas.toBlob((blob) => {
      resolve(blob);
    }, 'image/jpeg', 1);
  });
};

Could we consider updating the example, or make it clear that the current example doesn’t work well for cases where the displayed image/crop is much smaller than the natural size of the image?

[SkrewEverything]

@ryshep111 Some lines were missing in the FAQ code, which are present in the codesandbox.

@DominicTobias Maybe you need to update the code snippet in the FAQ

These 5 lines must be added:

  const pixelRatio = window.devicePixelRatio;
  canvas.width = crop.width * pixelRatio;
  canvas.height = crop.height * pixelRatio;

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

The full code in the FAQ must be:

/**
 * @param {HTMLImageElement} image - Image File Object
 * @param {Object} crop - crop Object
 * @param {String} fileName - Name of the returned file in Promise
 */
export function 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");

  // New lines to be added
  const pixelRatio = window.devicePixelRatio;
  canvas.width = crop.width * pixelRatio;
  canvas.height = crop.height * pixelRatio;
  ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
  ctx.imageSmoothingQuality = "high";

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

  // As Base64 string
  // const base64Image = canvas.toDataURL("image/jpeg");
  // return base64Image;

  // As a blob
  return new Promise((resolve, reject) => {
    canvas.toBlob(
      (blob) => {
        blob.name = fileName;
        resolve(blob);
      },
      "image/jpeg",
      1
    );
  });
}

[DominicTobias]

Thanks @SkrewEverything will update it