Image Cropping Tool

function processImage(originalImg, cropX = 0, cropY = 0, cropW = 0, cropH = 0) {
    // Parse numeric inputs from parameters.
    // These represent the desired top-left corner (x, y) and dimensions (width, height) of the crop.
    const x = Number(cropX);
    const y = Number(cropY);
    let desiredCropWidth = Number(cropW);
    let desiredCropHeight = Number(cropH);

    // Use naturalWidth and naturalHeight for the true dimensions of the image content.
    // Fallback to width/height if naturalWidth/Height are 0 (e.g., for SVGs without intrinsic size, or if image not fully loaded).
    const imageActualWidth = originalImg.naturalWidth || originalImg.width;
    const imageActualHeight = originalImg.naturalHeight || originalImg.height;

    // If the image has no dimensions (e.g., not loaded or invalid image),
    // return a minimal 1x1 empty canvas to prevent errors.
    if (imageActualWidth === 0 || imageActualHeight === 0) {
        console.warn("processImage: Image dimensions are zero. Ensure the image is loaded and has valid dimensions.");
        const emptyCanvas = document.createElement('canvas');
        emptyCanvas.width = 1;
        emptyCanvas.height = 1;
        return emptyCanvas;
    }

    // Determine the source X (sx) and Y (sy) for the crop area within the original image.
    // Clamp sx to be within the valid range [0, imageActualWidth - 1].
    // Example: If imageActualWidth is 100, sx can range from 0 to 99.
    // If imageActualWidth is 1 (a 1-pixel wide image), sx must be 0.
    // (imageActualWidth -1) is safe because we've confirmed imageActualWidth > 0.
    const sx = Math.max(0, Math.min(x, imageActualWidth - 1));
    
    // Clamp sy similarly for the Y coordinate.
    const sy = Math.max(0, Math.min(y, imageActualHeight - 1));

    // Calculate the actual width of the crop area (sWidth).
    // If desiredCropWidth is 0 or negative (often indication from default value or to auto-calculate),
    // then crop from sx to the right edge of the image.
    if (desiredCropWidth <= 0) {
        desiredCropWidth = imageActualWidth - sx;
    } else {
        // If a positive width is specified, ensure it doesn't extend beyond the available width from sx.
        desiredCropWidth = Math.min(desiredCropWidth, imageActualWidth - sx);
    }

    // Calculate the actual height of the crop area (sHeight) similarly.
    if (desiredCropHeight <= 0) {
        desiredCropHeight = imageActualHeight - sy;
    } else {
        desiredCropHeight = Math.min(desiredCropHeight, imageActualHeight - sy);
    }

    // The final dimensions for the cropped canvas (and the source rectangle in drawImage)
    // must be at least 1x1 pixel to be valid for canvas dimensions and drawImage.
    const sWidth = Math.max(1, desiredCropWidth);
    const sHeight = Math.max(1, desiredCropHeight);

    // Create a new canvas element to hold the cropped image.
    const canvas = document.createElement('canvas');
    canvas.width = sWidth;  // Set canvas width to the calculated crop width.
    canvas.height = sHeight; // Set canvas height to the calculated crop height.

    // Get the 2D rendering context for the canvas.
    const ctx = canvas.getContext('2d');
    
    // Draw the specified portion of the originalImg onto the new canvas.
    // Arguments for drawImage:
    // originalImg: The source image.
    // sx, sy: The X and Y coordinates of the top-left corner of the sub-rectangle of originalImg to draw.
    // sWidth, sHeight: The width and height of the sub-rectangle of originalImg to draw.
    // 0, 0: The X and Y coordinates on the canvas where the top-left corner of the drawn image should be placed.
    // sWidth, sHeight: The width and height to draw the image on the canvas. Using sWidth, sHeight here means
    //                  the cropped portion is drawn at its original size.
    ctx.drawImage(originalImg, sx, sy, sWidth, sHeight, 0, 0, sWidth, sHeight);

    // Return the canvas element containing the cropped image.
    return canvas;
}