Image Warming Filter Effect Tool

function processImage(originalImg, intensity = 30) {
    // intensity: A number typically from 0 (no effect) to 100 (strong effect). Default is 30.
    // Higher values increase the warming effect.
    // Ensures intensity is not negative, as this is a warming filter.
    const safeIntensity = Math.max(0, parseFloat(String(intensity)));

    const canvas = document.createElement('canvas');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    const ctx = canvas.getContext('2d');

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

    // If intensity is 0, no effect is applied, return the canvas with the original image
    if (safeIntensity === 0) {
        return canvas;
    }

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    // Define how much each channel is affected by the intensity.
    // These factors determine the "color" of the warmth.
    // Increase Red, Increase Green (less than Red), Decrease Blue.
    const rAddFactor = 1.0;  // Amount to add to Red channel per unit of intensity
    const gAddFactor = 0.5;  // Amount to add to Green channel per unit of intensity
    const bSubFactor = 0.8;  // Amount to subtract from Blue channel per unit of intensity

    const rChange = safeIntensity * rAddFactor;
    const gChange = safeIntensity * gAddFactor;
    const bChange = safeIntensity * bSubFactor;

    for (let i = 0; i < data.length; i += 4) {
        // Get current pixel's RGB values
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];

        // Apply warming effect
        r = r + rChange;
        g = g + gChange;
        b = b - bChange;

        // Ensure values stay within the 0-255 range
        data[i] = Math.min(255, Math.max(0, r));       // Red
        data[i + 1] = Math.min(255, Math.max(0, g)); // Green
        data[i + 2] = Math.min(255, Math.max(0, b));    // Blue
        // Alpha channel (data[i + 3]) remains unchanged
    }

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

    return canvas;
}