Image Black And White Red Filter Effect Tool

function processImage(originalImg) {
    // Create a canvas element
    const canvas = document.createElement('canvas');
    // Get 2D rendering context. 
    // 'willReadFrequently: true' is a performance hint for contexts that will have many getImageData/putImageData calls.
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // Check if the image has valid dimensions.
    // originalImg.naturalWidth and originalImg.naturalHeight are the intrinsic dimensions of the image.
    // They are 0 if the image is not loaded, is broken, or is not a valid image element.
    if (!originalImg || originalImg.naturalWidth === 0 || originalImg.naturalHeight === 0) {
        console.error("Error: Image not loaded, is invalid, or dimensions are zero. Cannot process.");
        // Create a small canvas to display an error message
        canvas.width = 250; // Example small size
        canvas.height = 60;  // Example small size
        
        // Simple error styling
        ctx.fillStyle = '#f0f0f0'; // Light gray background
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = 'red'; // Red text for error
        ctx.font = '12px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('Error: Invalid image or not fully loaded.', canvas.width / 2, canvas.height / 2);
        return canvas; // Return the error canvas
    }
    
    // Set canvas dimensions to match the original image
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // Draw the original image onto the canvas
    // This is necessary to access its pixel data via getImageData()
    try {
        ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    } catch (error) {
        console.error("Error drawing image onto canvas:", error);
        // This could happen for various reasons, including if the image object is unusual or security restricted.
        ctx.fillStyle = '#f0f0f0';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = 'red';
        ctx.font = '12px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('Error: Could not draw the image.', canvas.width / 2, canvas.height / 2);
        return canvas;
    }


    // Try to get the pixel data from the canvas
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (error) {
        // This error commonly occurs if the image is hosted on a different domain
        // and the server does not send appropriate CORS headers (cross-origin restriction),
        // which taints the canvas and prevents pixel data extraction.
        console.error("Error getting image data (likely cross-origin issue):", error);
        
        // Display an error message on the canvas
        ctx.fillStyle = '#f0f0f0'; // Light gray background
        ctx.fillRect(0, 0, canvas.width, canvas.height); // Clear canvas with background color

        ctx.fillStyle = 'black'; // Text color
        ctx.font = 'bold 14px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        
        const messageLines = [
            "Error: Could not access image pixels.",
            "This is often due to cross-origin restrictions."
        ];
        const lineHeight = 18; // Approximate line height for 14px font
        const totalTextHeight = messageLines.length * lineHeight;
        let startY = (canvas.height - totalTextHeight) / 2 + lineHeight / 2; // Center vertically

        for (const line of messageLines) {
            ctx.fillText(line, canvas.width / 2, startY);
            startY += lineHeight;
        }
        return canvas; // Return the canvas with the error message
    }
    
    const data = imageData.data; // This is a Uint8ClampedArray: [R, G, B, A, R, G, B, A, ...]

    // Apply the "Black and White Red #25 Filter Effect".
    // For each pixel, the grayscale value is determined solely by its original red channel value.
    // This simulates a strong red filter which effectively blocks green and blue light.
    // As a result, red areas in the original image will appear lighter (closer to white),
    // and blue/green areas will appear darker (closer to black) in the grayscale output.
    for (let i = 0; i < data.length; i += 4) {
        // data[i] is the red value of the current pixel
        // data[i+1] is the green value (not directly used for this filter's intensity)
        // data[i+2] is the blue value (not directly used for this filter's intensity)
        // data[i+3] is the alpha value (transparency)

        const redChannelValue = data[i]; 
        
        // Set all R, G, and B channels to this redChannelValue to create a grayscale pixel.
        // This specific way of calculating grayscale (gray = R) is characteristic of a strong red filter effect.
        data[i]     = redChannelValue;   // New Red component
        data[i + 1] = redChannelValue;   // New Green component
        data[i + 2] = redChannelValue;   // New Blue component
        // The Alpha channel (data[i + 3]) is preserved to maintain original transparency.
    }

    // Put the modified pixel data back onto the canvas
    ctx.putImageData(imageData, 0, 0);

    // Return the processed canvas
    return canvas;
}