Image Black And White Blue Filter Effect Tool

function processImage(originalImg) {
    // 1. Create canvas
    const canvas = document.createElement('canvas');
    
    // Use naturalWidth/Height for HTMLImageElement to get intrinsic dimensions.
    // Fallback to width/height for other types like HTMLCanvasElement or if naturalWidth/Height are 0.
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;
    
    canvas.width = width;
    canvas.height = height;

    // 2. Get 2D rendering context
    const ctx = canvas.getContext('2d');
    if (!ctx) {
        console.error("Failed to get 2D rendering context. Your browser might not support Canvas or be out of resources.");
        // Return an empty (but valid) canvas to prevent breaking the caller if it expects a canvas object.
        // The canvas will be 0x0 if width/height were 0, or blank if context creation failed later.
        return canvas;
    }

    // Defensive checks for width/height if originalImg was not properly loaded or has no dimensions
    if (width === 0 || height === 0) {
        console.warn("Image has zero width or height. Output will be an empty canvas.");
        // No drawing needed, just return the (potentially 0x0) canvas
        return canvas;
    }

    // 3. Draw the original image onto the canvas
    try {
        ctx.drawImage(originalImg, 0, 0, width, height);
    } catch (e) {
        console.error("Error drawing image onto canvas:", e);
        // Attempt to provide visual feedback on the canvas if possible
        ctx.fillStyle = 'lightgray';
        ctx.fillRect(0, 0, width, height);
        ctx.fillStyle = 'red';
        ctx.font = '16px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText("Error: Could not draw image.", width / 2, height / 2);
        return canvas;
    }

    // 4. Get the ImageData object from the canvas
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, width, height);
    } catch (e) {
        // This error commonly occurs due to cross-origin security restrictions (tainted canvas)
        // when loading images from different domains without CORS approval.
        console.error("Failed to get ImageData from canvas (cross-origin issue?):", e);
        // Provide visual feedback on the canvas
        ctx.fillStyle = 'lightgray';
        ctx.fillRect(0, 0, width, height); // Clear previous drawing
        ctx.fillStyle = 'red';
        ctx.font = '14px Arial'; // Adjusted font size for potentially longer messages
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        const messageLines = [
            "Error: Cannot process image pixels.",
            "This may be due to cross-origin restrictions."
        ];
        messageLines.forEach((line, index) => {
            ctx.fillText(line, width / 2, height / 2 - (messageLines.length-1)*8 + index * 20);
        });
        return canvas;
    }
    
    const data = imageData.data; // This is a Uint8ClampedArray: [R, G, B, A, R, G, B, A, ...]

    // 5. Iterate through the pixel data and apply the filter
    // The "B+W Blue #47 Filter Effect" means creating a black and white (grayscale) image
    // where the tonal values are rendered simulating a Wratten #47 (deep blue) filter.
    // This type of filter passes blue light and strongly absorbs (blocks) red and green light.
    // Consequently, in the resulting B+W image:
    // - Blue objects from the original image will appear very light (towards white).
    // - Red and Green objects from the original image will appear very dark (towards black).
    // A common and effective way to simulate this is to make the grayscale intensity
    // primarily or solely dependent on the blue channel of the original pixel.
    // For this implementation, we'll use the blue channel's value directly as the grayscale value.
    for (let i = 0; i < data.length; i += 4) {
        // const r_original = data[i];     // Original Red component
        // const g_original = data[i + 1]; // Original Green component
        const b_original = data[i + 2]; // Original Blue component
        // const a_original = data[i + 3]; // Original Alpha component

        // The grayscale value is determined solely by the blue channel's intensity.
        const gray = b_original; 

        data[i] = gray;     // Set Red component to the new gray value
        data[i + 1] = gray; // Set Green component to the new gray value
        data[i + 2] = gray; // Set Blue component to the new gray value
        // Alpha (data[i + 3]) remains unchanged by this filter
    }

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

    // 7. Return the modified canvas
    return canvas;
}