Image Blue Filter Application

function processImage(originalImg) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to the original image's intrinsic size
    // Using naturalWidth/Height for intrinsic dimensions, fallback to width/height
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;

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

    // Get the image data from the canvas.
    // Note: ctx.getImageData can throw a security error if the image is loaded from a different
    // origin without CORS headers, tainting the canvas. This function assumes the image is usable.
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        console.error("Error getting image data for processing:", e);
        // In case of error (e.g., tainted canvas), return the canvas with the original image drawn,
        // or handle error as appropriate. For this exercise, we'll alert and return the unchanged canvas.
        // alert("Could not process image due to cross-origin restrictions."); // Optional: alert user
        return canvas; // Return canvas with original image drawn
    }
    
    const data = imageData.data; // data is a Uint8ClampedArray: R,G,B,A,R,G,B,A,...

    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];   // Original Red value
        const g = data[i+1]; // Original Green value
        const b = data[i+2]; // Original Blue value
        // data[i+3] is the Alpha channel, we'll leave it unchanged.

        // Apply a "blue photo filter" effect.
        // This specific variant aims for a "cooling" effect often associated with blue filters.
        // It works by:
        // - Reducing the red component.
        // - Slightly reducing the green component.
        // - Increasing the blue component.
        // The factors chosen are to provide a noticeable but not overpowering blue tint.
        
        const newR = r * 0.90;  // Reduce red component by 10%
        const newG = g * 0.95;  // Reduce green component by 5%
        const newB = b * 1.15;  // Increase blue component by 15%

        // Assign the new RGB values.
        // The Uint8ClampedArray automatically handles clamping values to the 0-255 range
        // and rounding to the nearest integer. For example, if newB calculates to 260.5,
        // it will be stored as 255. If it's 50.3, it'll be 50.
        data[i]   = newR;
        data[i+1] = newG;
        data[i+2] = newB;
    }

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

    return canvas;
}