Image Dubblefilm Solar Filter Effect Application

function processImage(originalImg) {
    // Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure the image is loaded before trying to get its dimensions
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    // Set canvas dimensions to the image dimensions
    canvas.width = width;
    canvas.height = height;

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

    // Get the image data from the canvas
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // Coefficients for the "Dubblefilm Solar" like effect
    // These are chosen to give a strong warm (orange/red/yellow) cast,
    // boost reds and yellows, and significantly mute blues.
    const rFactorR = 1.5; // Red channel's dependence on original Red
    const rFactorG = 0.1; // Red channel's dependence on original Green
    const rFactorB = 0.0; // Red channel's dependence on original Blue

    const gFactorR = 0.1; // Green channel's dependence on original Red (adds warmth)
    const gFactorG = 1.3; // Green channel's dependence on original Green
    const gFactorB = 0.1; // Green channel's dependence on original Blue (warms up blues if shifted to green)

    const bFactorR = 0.05; // Blue channel's dependence on original Red (slight warmth tint)
    const bFactorG = 0.2;  // Blue channel's dependence on original Green (can shift blues to cyan/greenish)
    const bFactorB = 0.4;  // Blue channel's dependence on original Blue (significantly reduce blue)

    // Iterate over each pixel (RGBA)
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];
        // Alpha channel (data[i+3]) is preserved

        // Apply the color transformation
        let newR = r * rFactorR + g * rFactorG + b * rFactorB;
        let newG = r * gFactorR + g * gFactorG + b * gFactorB;
        let newB = r * bFactorR + g * bFactorG + b * bFactorB;

        // Clamp values to 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 the canvas with the applied effect
    return canvas;
}