Warm-Hearted Photo Filter

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

    // Use naturalWidth/Height for intrinsic image dimensions, fallback to width/height
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

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

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

    // If the image has no dimensions (e.g., not loaded, or invalid image),
    // getImageData might throw an error or return empty data.
    // Return the canvas as is (it will be blank or match the drawn invalid image).
    if (imgWidth === 0 || imgHeight === 0) {
        return canvas;
    }
    
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data; // This is an Uint8ClampedArray

    // Define the base adjustments for the "Warm-Hearted" filter.
    // These values aim for a warm, slightly rosy/reddish tint.
    // Adjust these constants to change the character of the filter.
    const baseRedIncrease = 30;    // How much to boost the red channel
    const baseGreenIncrease = 5;   // How much to boost the green channel (less than red for a rosy tint)
    const baseBlueDecrease = 15;   // How much to decrease the blue channel

    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];     // Original Red
        const g = data[i+1];   // Original Green
        const b = data[i+2];   // Original Blue
        // data[i+3] is the Alpha channel, which we'll leave unchanged.

        // Calculate the actual adjustment based on the strength parameter
        const actualRedIncrease = baseRedIncrease * strength;
        const actualGreenIncrease = baseGreenIncrease * strength;
        const actualBlueDecrease = baseBlueDecrease * strength;

        // Apply the adjustments
        let newR = r + actualRedIncrease;
        let newG = g + actualGreenIncrease;
        let newB = b - actualBlueDecrease; // Decrease blue

        // Clamp the values to ensure they remain within the 0-255 range
        data[i]   = Math.max(0, Math.min(255, newR));
        data[i+1] = Math.max(0, Math.min(255, newG));
        data[i+2] = Math.max(0, Math.min(255, newB));
    }

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

    return canvas;
}