Photo Warm Filter Application

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

    // Determine image dimensions. Use naturalWidth/Height if available, otherwise fallback to width/height.
    const w = originalImg.naturalWidth || originalImg.width;
    const h = originalImg.naturalHeight || originalImg.height;

    // Handle cases where image dimensions might be invalid (e.g., image not fully loaded)
    if (w === 0 || h === 0) {
        // Return a minimal canvas to avoid errors downstream if dimensions are zero.
        canvas.width = 1;
        canvas.height = 1;
        // Optionally, one could log a warning here:
        // console.warn("Image has zero dimensions. Ensure it's loaded before processing.");
        return canvas;
    }

    canvas.width = w;
    canvas.height = h;

    // Validate and normalize the intensity parameter.
    // Coerce to number, handle NaN, and clamp to [0, 1] range.
    let numericIntensity = parseFloat(intensity);
    if (isNaN(numericIntensity)) {
        // If 'intensity' was a non-numeric string (e.g., "text") or became NaN.
        // Fallback to the default value.
        numericIntensity = 0.5;
    }
    numericIntensity = Math.max(0, Math.min(1, numericIntensity));

    // Draw the original image onto the canvas.
    // Using all arguments for drawImage ensures it's drawn at the correct size,
    // even if the Image object had CSS/attribute scaling.
    ctx.drawImage(originalImg, 0, 0, w, h);

    // If intensity is zero, no filter effect is needed; return the canvas with the original image.
    if (numericIntensity === 0) {
        return canvas;
    }

    // Get the pixel data from the canvas.
    const imageData = ctx.getImageData(0, 0, w, h);
    const data = imageData.data; // This is a Uint8ClampedArray: [R,G,B,A, R,G,B,A, ...]

    // Define the strength of changes for each color channel at full intensity (intensity = 1).
    // These values can be tweaked to alter the "flavor" of the warm filter.
    const maxRedIncrease = 40;   // How much to increase the red channel.
    const maxGreenIncrease = 20; // How much to increase the green channel (adds yellow/orange tones with red).
    const maxBlueDecrease = 30;  // How much to decrease the blue channel (reduces cool tones).

    // Calculate the actual change for each channel based on the current intensity.
    const rDelta = maxRedIncrease * numericIntensity;
    const gDelta = maxGreenIncrease * numericIntensity;
    const bDelta = maxBlueDecrease * numericIntensity; // This is a positive value to be subtracted.

    // Iterate over each pixel in the image data.
    // Each pixel consists of 4 values in the array: R, G, B, Alpha.
    for (let i = 0; i < data.length; i += 4) {
        // Apply the warm filter adjustments.
        // Red channel: increase, clamp at 255.
        data[i]     = Math.min(255, data[i] + rDelta);
        // Green channel: increase, clamp at 255.
        data[i + 1] = Math.min(255, data[i + 1] + gDelta);
        // Blue channel: decrease, clamp at 0.
        data[i + 2] = Math.max(0,   data[i + 2] - bDelta);
        // Alpha channel (data[i+3]) remains unchanged.
    }

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

    // Return the canvas with the applied warm filter.
    return canvas;
}