Image Bottle Top Removal And Placement Tool

function processImage(originalImg, capHeightPx = 50, capWidthFactor = 0.25, capPlacementGapPx = 20, capSourceOffsetYPx = 0, placedCapRelativeOffsetYPx = 0) {
    const imgWidth = originalImg.width;
    const imgHeight = originalImg.height;

    // Helper function to return a canvas with the original image drawn on it
    // This is used if processing parameters are invalid or lead to no operation.
    const createAndDrawOriginal = (img) => {
        const canvas = document.createElement('canvas');
        canvas.width = img.width > 0 ? img.width : 300; // Default width if img not loaded
        canvas.height = img.height > 0 ? img.height : 150; // Default height if img not loaded
        const ctx = canvas.getContext('2d');
        if (img.complete && img.naturalWidth > 0 && img.naturalHeight > 0) {
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        } else {
            // Draw a placeholder or indication if image is not loaded/valid
            ctx.fillStyle = '#eee';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = '#777';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText('Image not loaded', canvas.width / 2, canvas.height / 2);
            console.warn("Original image not loaded or has no dimensions. Returning placeholder.");
        }
        return canvas;
    };

    // Ensure image has dimensions. If not, it might not be loaded.
    if (imgWidth === 0 || imgHeight === 0) {
        // This case handles if originalImg.width/height are 0 (e.g., image not loaded)
        return createAndDrawOriginal(originalImg);
    }

    // Validate capSourceOffsetYPx
    const actualCapSourceOffsetY = Math.max(0, capSourceOffsetYPx);
    if (actualCapSourceOffsetY >= imgHeight) {
        console.warn("capSourceOffsetYPx is beyond image height. Returning original image.");
        return createAndDrawOriginal(originalImg);
    }

    // Calculate the height of the cap to be extracted from the source image
    const definedCapHeight = Math.max(0, capHeightPx);
    const sourceRectHeight = Math.min(definedCapHeight, imgHeight - actualCapSourceOffsetY);
    if (sourceRectHeight <= 0) {
        console.warn("Calculated cap height is zero or negative. Returning original image.");
        return createAndDrawOriginal(originalImg);
    }

    // Calculate the width of the cap
    const actualCapWidthFactor = Math.max(0, Math.min(1, capWidthFactor)); // Ensure factor is between 0 and 1
    const sourceRectWidth = Math.round(imgWidth * actualCapWidthFactor);
    if (sourceRectWidth <= 0) {
        console.warn("Calculated cap width is zero or negative. Returning original image.");
        return createAndDrawOriginal(originalImg);
    }

    // Calculate the X-coordinate for the cap on the source image (centered)
    const sourceRectX = Math.round((imgWidth - sourceRectWidth) / 2);
    const sourceRectY = actualCapSourceOffsetY;

    // --- Main processing starts here ---

    // Create the output canvas
    // Width: original image width + gap + cap width
    // Height: original image height
    const finalCanvasWidth = imgWidth + capPlacementGapPx + sourceRectWidth;
    const finalCanvasHeight = imgHeight;

    const canvas = document.createElement('canvas');
    canvas.width = finalCanvasWidth;
    canvas.height = finalCanvasHeight;
    const ctx = canvas.getContext('2d');

    // Step 1: Draw the original image onto the main canvas (this will be the "bottle" part)
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    // Step 2: "Remove" the cap from the drawn bottle part by clearing the rectangle
    // This makes the area transparent on the main canvas where the cap used to be.
    ctx.clearRect(sourceRectX, sourceRectY, sourceRectWidth, sourceRectHeight);

    // Step 3: Extract the cap into a temporary canvas
    // This is done to get the actual pixel data of the cap from the original image
    // *before* it was cleared in Step 2 on the main canvas.
    const tempCapCanvas = document.createElement('canvas');
    tempCapCanvas.width = sourceRectWidth;
    tempCapCanvas.height = sourceRectHeight;
    const tempCapCtx = tempCapCanvas.getContext('2d');

    // Draw the cap portion from originalImg to tempCapCanvas
    // Parameters: image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight
    tempCapCtx.drawImage(originalImg,
        sourceRectX, sourceRectY, sourceRectWidth, sourceRectHeight, // Source rect from originalImg
        0, 0, sourceRectWidth, sourceRectHeight);                  // Destination rect on tempCapCanvas

    // Step 4: Place the extracted cap (from tempCapCanvas) onto the main canvas
    // The cap is placed to the right of the original image area.
    const capDestX = imgWidth + capPlacementGapPx;

    // The cap's top edge Y position on the final canvas.
    // placedCapRelativeOffsetYPx is an offset from the original Y position of the cap's top edge (sourceRectY).
    const capDestY = sourceRectY + placedCapRelativeOffsetYPx;

    // Draw the cap from tempCapCanvas to its new position on the main canvas
    ctx.drawImage(tempCapCanvas, capDestX, capDestY);

    // Return the final canvas
    return canvas;
}