Image Color Temperature Blue Filter Effect Tool

function processImage(originalImg, strength = 50) {
    // 1. Create canvas and get context
    const canvas = document.createElement('canvas');
    // Add willReadFrequently hint for potential performance improvement in some browsers
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // 2. Set canvas dimensions based on the image's natural dimensions
    // Using naturalWidth/Height is important for getting the original image size
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // 3. Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    // If image has no dimensions (e.g., not loaded yet or invalid), return canvas as is
    if (imgWidth === 0 || imgHeight === 0) {
        console.warn("Image has zero width or height. Returning canvas with original draw (if any).");
        return canvas;
    }

    // 4. Get ImageData from the canvas
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    } catch (e) {
        console.error("Error getting ImageData:", e);
        // This can happen due to cross-origin restrictions if the image is loaded without CORS.
        // In such a case, pixel manipulation is not allowed.
        // Return the canvas with the original image drawn on it.
        return canvas;
    }

    const data = imageData.data;

    // 5. Sanitize and prepare the strength parameter
    let sValue = Number(strength);
    if (isNaN(sValue)) {
        // If strength is not a valid number, fall back to a default value (e.g., 50 or the original default)
        sValue = 50; 
    }
    // Ensure strength is not negative for a "blue" filter effect.
    // A negative value could arguably create a "warming" filter, but this tool is for a blue filter.
    sValue = Math.max(0, sValue);
    // Optional:  Clamp sValue to a max (e.g., 255) if desired, though Math.min/max in pixel ops will handle it.
    // sValue = Math.min(sValue, 255);


    // 6. Modify pixel data to apply the CTB filter effect
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];   // Red channel
        const g = data[i+1]; // Green channel
        const b = data[i+2]; // Blue channel
        // Alpha channel (data[i+3]) is typically not modified for this filter

        // Apply CTB effect:
        // - Decrease the red component
        // - Slightly decrease the green component (optional, enhances cooling)
        // - Increase the blue component
        
        data[i] = Math.max(0, r - sValue); // Red: Decrease, clamp at 0
        data[i+1] = Math.max(0, g - sValue * 0.25); // Green: Slightly decrease, clamp at 0. Factor 0.25 is adjustable.
        data[i+2] = Math.min(255, b + sValue); // Blue: Increase, clamp at 255
    }

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

    // 8. Return the canvas element
    return canvas;
}