Image Transparent Area Detector

/**
 * Detects the bounding box of the non-transparent area of an image.
 * It returns a canvas element with the original image, a red bounding box
 * highlighting the content area, and the coordinates/dimensions of the box.
 *
 * @param {Image} originalImg The original image object to process.
 * @returns {HTMLCanvasElement} A canvas element displaying the result.
 */
function processImage(originalImg) {
    // Create a canvas element to work with
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Get the dimensions of the original image
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    // Set the canvas dimensions to match the image
    canvas.width = width;
    canvas.height = height;

    // Draw the image onto the canvas
    ctx.drawImage(originalImg, 0, 0);

    // Get the pixel data from the canvas
    // This is an array of RGBA values for each pixel
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, width, height);
    } catch (e) {
        // Handle potential security errors (e.g., cross-origin image)
        ctx.font = "16px Arial";
        ctx.fillStyle = "red";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText("Could not process image due to cross-origin restrictions.", width / 2, height / 2);
        return canvas;
    }
    
    const data = imageData.data;

    // Initialize bounding box coordinates
    let minX = width;
    let minY = height;
    let maxX = -1;
    let maxY = -1;

    // Iterate over every pixel to find the bounds of the non-transparent area
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            // The alpha channel is the 4th component (index 3) of each pixel's RGBA data
            const alpha = data[(y * width + x) * 4 + 3];

            // If the pixel is not fully transparent
            if (alpha > 0) {
                minX = Math.min(minX, x);
                minY = Math.min(minY, y);
                maxX = Math.max(maxX, x);
                maxY = Math.max(maxY, y);
            }
        }
    }

    // Check if any non-transparent pixels were found
    if (maxX > -1) {
        // Calculate the dimensions of the content area
        const contentLeft = minX;
        const contentTop = minY;
        const contentWidth = maxX - minX + 1;
        const contentHeight = maxY - minY + 1;

        // Draw a red bounding box around the detected content
        ctx.strokeStyle = 'rgba(255, 0, 0, 0.8)';
        ctx.lineWidth = 2;
        ctx.strokeRect(contentLeft, contentTop, contentWidth, contentHeight);

        // Prepare the text to display the results
        const infoText = `x: ${contentLeft}, y: ${contentTop}, width: ${contentWidth}, height: ${contentHeight}`;
        
        // Add a semi-transparent background for the text to ensure readability
        ctx.font = '16px Arial';
        const textMetrics = ctx.measureText(infoText);
        ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
        ctx.fillRect(4, 4, textMetrics.width + 12, 24);
        
        // Draw the text
        ctx.fillStyle = 'white';
        ctx.textBaseline = 'top';
        ctx.fillText(infoText, 10, 8);

    } else {
        // If maxX is still -1, the image is completely transparent
        const infoText = 'Image is completely transparent.';
        ctx.font = '18px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        
        // Draw a background for the message
        ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
        ctx.fillRect(0, height / 2 - 20, width, 40);
        
        // Draw the message
        ctx.fillStyle = 'white';
        ctx.fillText(infoText, width / 2, height / 2);
    }

    // Return the canvas with the visualization
    return canvas;
}