Image Color Temperature Orange Filter Effect Tool

function processImage(originalImg, orangeLevel = 50) {
    // The 'orangeLevel' parameter controls the intensity of the CTO filter.
    // It can be a number or a string representing a number, expected range 0-100.
    // Default is 50 for a moderate effect.

    let numericOrangeLevel = parseFloat(orangeLevel);

    // If orangeLevel was a non-numeric string (e.g., "abc") or parsing failed,
    // parseFloat returns NaN. In this case, fall back to the default value of 50.
    // This also handles cases where orangeLevel might be null or an incompatible type.
    // If orangeLevel was not provided, it defaults to 50 (number type)
    // from the function signature, and parseFloat(50) is 50.
    if (isNaN(numericOrangeLevel)) {
        numericOrangeLevel = 50; 
    }

    // Clamp the numericOrangeLevel to the effective range [0, 100]
    // This ensures predictable behavior even if input is outside this range.
    numericOrangeLevel = Math.max(0, Math.min(100, numericOrangeLevel));

    const canvas = document.createElement('canvas');
    // Use naturalWidth/Height for intrinsic dimensions; fallback to width/height
    // which are properties standard HTMLImageElement.
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;

    // If image dimensions are invalid (e.g., image not loaded properly or is 0x0),
    // return an empty canvas to prevent errors during processing.
    if (canvas.width === 0 || canvas.height === 0) {
        console.warn("Image has zero width or height. Returning an empty canvas.");
        return canvas;
    }
    
    // Get the 2D rendering context.
    // { willReadFrequently: true } is a performance hint that can optimize
    // repeated calls to getImageData/putImageData.
    const ctx = canvas.getContext('2d', { willReadFrequently: true });
    
    if (!ctx) {
        // This is highly unlikely for a '2d' context in modern browsers.
        console.error("Failed to get 2D rendering context. Returning an empty canvas.");
        return canvas; // Return empty canvas if context cannot be obtained.
    }

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

    // Get the pixel data from the canvas.
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        // This can happen due to security restrictions (e.g., tainted canvas from cross-origin image
        // loaded without CORS attributes/headers) or if the canvas dimensions are excessively large.
        console.error("Failed to get image data, possibly due to canvas security restrictions (tainted canvas) or invalid state: ", e);
        // Return the canvas with the original image drawn, as filtering isn't possible.
        return canvas;
    }
    
    const data = imageData.data; // This is a Uint8ClampedArray.

    // Define the maximum adjustment values for R, G, B channels when orangeLevel is 100.
    // These values are chosen to produce a noticeable CTO (Color Temperature Orange) effect,
    // which warms the image by making it more orange.
    const maxRedIncrease = 75;    // Increase Red to make the image warmer/more orange.
    const maxGreenIncrease = 45;  // Increase Green moderately (Orange is a mix of Red and Green, with more Red).
    const maxBlueDecrease = 60;   // Decrease Blue significantly to enhance the warmth (less blue = warmer color temp).

    // Calculate the actual adjustment to apply based on numericOrangeLevel (which is 0-100).
    const rAdd = (numericOrangeLevel / 100) * maxRedIncrease;
    const gAdd = (numericOrangeLevel / 100) * maxGreenIncrease;
    const bSubtract = (numericOrangeLevel / 100) * maxBlueDecrease;

    // Iterate over each pixel in the image data.
    // Each pixel is represented by 4 consecutive values in the array: R, G, B, A.
    for (let i = 0; i < data.length; i += 4) {
        // Apply adjustments to the R, G, B channels.
        data[i]   += rAdd;      // Red channel
        data[i+1] += gAdd;      // Green channel
        data[i+2] -= bSubtract; // Blue channel
        // The Alpha channel (data[i+3]) is left unchanged to preserve transparency.

        // Note: Uint8ClampedArray automatically clamps the resulting values to the 0-255 range
        // and rounds fractional results (typically using "round half to even" method).
        // So, explicit Math.min(255, Math.max(0, ...)) is not strictly necessary here.
    }

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

    // Return the canvas element with the_numericOrangeLevel applied CTO filter effect.
    return canvas;
}