Image Headshot Cropper With 1:1 Resolution

/**
 * Crops an image to a 1:1 aspect ratio, focusing on the center of the image.
 * This is useful for creating square headshots or profile pictures.
 *
 * @param {Image} originalImg The original image object to be processed.
 * @returns {HTMLCanvasElement} A canvas element containing the centrally cropped 1:1 image.
 */
function processImage(originalImg) {
  // Create a new canvas element to draw the cropped image on.
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  // Get the dimensions of the original image.
  const originalWidth = originalImg.width;
  const originalHeight = originalImg.height;

  // Determine the size of the square crop. It will be the length of the shorter side of the image.
  const cropSize = Math.min(originalWidth, originalHeight);

  // Set the canvas dimensions to the crop size to create a 1:1 aspect ratio.
  canvas.width = cropSize;
  canvas.height = cropSize;

  // Calculate the starting coordinates for the crop rectangle to center it within the original image.
  // sx (source x) and sy (source y) represent the top-left corner of the cropping area.
  const sx = (originalWidth - cropSize) / 2;
  const sy = (originalHeight - cropSize) / 2;

  // Use the drawImage method with 9 arguments to slice the original image.
  // The slice from the original image (source) is then drawn onto the destination canvas.
  // drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
  ctx.drawImage(
    originalImg,
    sx, // source x: The x-coordinate of the top-left corner of the source rectangle.
    sy, // source y: The y-coordinate of the top-left corner of the source rectangle.
    cropSize, // source width: The width of the source rectangle.
    cropSize, // source height: The height of the source rectangle.
    0, // destination x: The x-coordinate of the top-left corner on the destination canvas.
    0, // destination y: The y-coordinate of the top-left corner on the destination canvas.
    cropSize, // destination width: The width to draw the image on the canvas.
    cropSize // destination height: The height to draw the image on the canvas.
  );

  // Return the canvas element, which now contains the cropped 1:1 image.
  return canvas;
}