Image Cold Filter Application

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

    // Determine the dimensions of the image.
    // Use naturalWidth/naturalHeight if available (intrinsic dimensions),
    // otherwise fallback to width/height (rendered or set dimensions).
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    // If the image has no dimensions (e.g., not loaded or invalid),
    // return an empty 0x0 canvas.
    if (width === 0 || height === 0) {
        canvas.width = 0;
        canvas.height = 0;
        return canvas;
    }

    canvas.width = width;
    canvas.height = height;

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

    // Try to get the pixel data from the canvas.
    // This can fail due to security restrictions (e.g., CORS issues with cross-origin images).
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, width, height);
    } catch (e) {
        // If getImageData fails, it's likely due to a tainted canvas.
        // In this scenario, pixel manipulation is not possible.
        // Return the canvas with the original image drawn on it as a fallback.
        return canvas;
    }
    
    const data = imageData.data; // This is a Uint8ClampedArray: [R,G,B,A, R,G,B,A, ...]

    // Validate and prepare the coldness value.
    // The `coldness` parameter can be a number or a string representing a number.
    // Convert it to a number. If it's not a valid number (e.g., "abc"),
    // set `finalColdnessValue` to 0, resulting in no filter effect.
    let finalColdnessValue = Number(coldness);
    if (isNaN(finalColdnessValue)) {
        finalColdnessValue = 0; 
    }

    // Apply the cold filter to each pixel.
    // A "cold" effect is achieved by decreasing the Red component and increasing the Blue component.
    // Green and Alpha channels remain unchanged.
    // The Uint8ClampedArray `data` will automatically clamp values to the 0-255 range.
    for (let i = 0; i < data.length; i += 4) {
        // R value: data[i]
        // G value: data[i+1]
        // B value: data[i+2]
        // A value: data[i+3]

        data[i] = data[i] - finalColdnessValue;         // Decrease Red channel
        // data[i+1] (Green channel) remains unchanged
        data[i + 2] = data[i + 2] + finalColdnessValue; // Increase Blue channel
        // data[i+3] (Alpha channel) remains unchanged
    }

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

    // Return the canvas element with the filtered image.
    return canvas;
}