Image Border Creator Tool

async function processImage(originalImg, borderColor = "black", borderWidth = 10) {
    // Sanitize borderWidth: ensure it's a usable number, fallback to default if not.
    let numBorderWidth = Number(borderWidth); 
    if (isNaN(numBorderWidth)) {
        // This catches cases where borderWidth might be "abc", "10px" (Number("10px") is NaN).
        // Note: Number("") is 0, Number("  ") is 0. These are valid and will result in actualBorderWidth = 0.
        console.warn(`Invalid borderWidth "${borderWidth}" resulted in NaN. Using default value 10 from function signature.`);
        numBorderWidth = 10; // Re-apply default if parsing failed. Default from signature is used if no value is passed.
    }
    const actualBorderWidth = Math.max(0, numBorderWidth); // Ensures border width is not negative.

    let imgLoadedSuccessfully = false;
    let errorReason = "Unknown error.";

    // Check if the image is already loaded and valid
    if (originalImg.complete) {
        if (originalImg.naturalWidth > 0 && originalImg.naturalHeight > 0) {
            imgLoadedSuccessfully = true;
        } else if (originalImg.src && originalImg.src !== "") {
            // Image is complete (tried to load) but has no dimensions. It's likely broken or an unsupported format.
            errorReason = "Image data is broken or format is unsupported (0 dimensions after load).";
            console.error(errorReason, originalImg);
        } else {
            // Image is complete, has no dimensions, and no src. E.g. `new Image()`.
            errorReason = "Image has no 'src' attribute to load data from.";
            console.error(errorReason, originalImg);
        }
    } else {
        // Image is not yet complete. We need to wait for it to load or error.
        if (originalImg.src && originalImg.src !== "") { // Ensure src is present and not empty
            // Image has a src and is not yet complete, so wait for onload/onerror.
            try {
                await new Promise((resolve, reject) => {
                    originalImg.onload = () => {
                        if (originalImg.naturalWidth > 0 && originalImg.naturalHeight > 0) {
                            resolve();
                        } else {
                            // Loaded, but resolved to 0x0 dimensions (e.g. empty SVG, or some other edge case)
                            reject(new Error("Image loaded successfully but reports zero dimensions."));
                        }
                    };
                    originalImg.onerror = () => {
                        reject(new Error("Image failed to load (onerror triggered). Check image URL or network."));
                    };
                });
                imgLoadedSuccessfully = true;
            } catch (error) {
                errorReason = error.message;
                console.error(errorReason, originalImg);
                // imgLoadedSuccessfully remains false
            }
        } else {
            errorReason = "Image 'src' is not set or is empty; cannot load the image.";
            console.error(errorReason, originalImg);
            // imgLoadedSuccessfully remains false
        }
    }

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

    if (!imgLoadedSuccessfully) {
        // Handle image loading failure by returning an error canvas
        outputCanvas.width = 350; // Arbitrary size for error message
        outputCanvas.height = 150;

        // Define padding for the border effect on the error box itself
        // This padding should not make the inner content area negative if actualBorderWidth is very large.
        const errorBoxVisibleBorder = Math.min(actualBorderWidth, outputCanvas.width / 3, outputCanvas.height / 3);

        if (errorBoxVisibleBorder > 0) {
            ctx.fillStyle = borderColor; // Use user's chosen border color for the error box's "border"
            ctx.fillRect(0, 0, outputCanvas.width, outputCanvas.height); 

            ctx.fillStyle = 'rgb(230, 230, 230)'; // Lighter background for the text area
            ctx.fillRect(
                errorBoxVisibleBorder, 
                errorBoxVisibleBorder, 
                outputCanvas.width - 2 * errorBoxVisibleBorder, 
                outputCanvas.height - 2 * errorBoxVisibleBorder
            );
        } else {
            // No border effect, just a plain error box
            ctx.fillStyle = 'rgb(230, 230, 230)';
            ctx.fillRect(0, 0, outputCanvas.width, outputCanvas.height);
        }
        
        ctx.fillStyle = 'red';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.font = 'bold 14px Arial';
        
        const textX = outputCanvas.width / 2;
        // Try to fit text within the inner box.
        const innerRectHeight = outputCanvas.height - 2 * errorBoxVisibleBorder;
        const textY = errorBoxVisibleBorder + innerRectHeight / 2; // Center in the lighter area

        ctx.fillText('Error: Image Could Not Be Processed', textX, textY - 10); // Main error title
        ctx.font = '12px Arial';
        ctx.fillText(errorReason, textX, textY + 10); // Specific reason
        
        return outputCanvas;
    }

    const imgWidth = originalImg.naturalWidth;
    const imgHeight = originalImg.naturalHeight;
    
    // This case should ideally be caught by the loading logic, but as a final safeguard:
    if (imgWidth === 0 || imgHeight === 0) {
        console.warn("Image loaded but has zero dimensions. Displaying border-only canvas.");
        outputCanvas.width = Math.max(1, 2 * actualBorderWidth); // Ensure at least 1x1 px
        outputCanvas.height = Math.max(1, 2 * actualBorderWidth);
        if (actualBorderWidth > 0) {
            ctx.fillStyle = borderColor;
            ctx.fillRect(0, 0, outputCanvas.width, outputCanvas.height);
        }
        // Optionally, add a small message or icon here too.
        return outputCanvas;
    }

    // Set canvas dimensions for the bordered image
    outputCanvas.width = imgWidth + 2 * actualBorderWidth;
    outputCanvas.height = imgHeight + 2 * actualBorderWidth;

    // Fill the entire canvas with the border color
    ctx.fillStyle = borderColor;
    ctx.fillRect(0, 0, outputCanvas.width, outputCanvas.height);

    // Draw the original image onto the canvas, offset by the border width
    ctx.drawImage(originalImg, actualBorderWidth, actualBorderWidth, imgWidth, imgHeight);

    return outputCanvas;
}