Image Utility Pole Filter Effect

function processImage(originalImg, contrast = 1.5, brightness = 0, tintColorStr = "#90A0B0", tintStrength = 0.3) {

    /**
     * Converts a HEX color string to an RGB object.
     * @param {string} hex - The hex color string (e.g., "#RRGGBB" or "#RGB").
     * @returns {{r: number, g: number, b: number}} RGB object. Defaults to medium gray if invalid.
     */
    function hexToRgb(hex) {
        const defaultColor = { r: 128, g: 128, b: 128 }; // Default to medium gray

        if (typeof hex !== 'string') {
            return defaultColor;
        }

        let sanitizedHex = hex.replace(/^#/, '');

        if (sanitizedHex.length === 3) {
            sanitizedHex = sanitizedHex[0] + sanitizedHex[0] + sanitizedHex[1] + sanitizedHex[1] + sanitizedHex[2] + sanitizedHex[2];
        }

        if (sanitizedHex.length !== 6) {
            return defaultColor;
        }

        const num = parseInt(sanitizedHex, 16);
        if (isNaN(num)) {
            return defaultColor;
        }

        return {
            r: (num >> 16) & 255,
            g: (num >> 8) & 255,
            b: num & 255
        };
    }

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure image dimensions are taken from naturalWidth/Height if available
    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);

    // Get the pixel data from the canvas
    const imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    const data = imageData.data;

    const tint = hexToRgb(tintColorStr);

    // Normalize parameters to avoid extreme effects or errors
    const C = Math.max(0, contrast); // Contrast should not be negative
    const B = parseFloat(brightness) || 0;
    const TS = Math.max(0, Math.min(1, parseFloat(tintStrength) || 0)); // Clamp tintStrength between 0 and 1

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

        // 1. Calculate Luminance (perceived brightness)
        let lum = 0.299 * r + 0.587 * g + 0.114 * b;

        // 2. Apply Contrast
        // Formula: NewValue = (((OldValue/255) - 0.5) * ContrastFactor) + 0.5) * 255
        // This centers the contrast effect around mid-gray (128)
        lum = (((lum / 255.0) - 0.5) * C + 0.5) * 255.0;
        
        // 3. Apply Brightness
        lum += B;

        // Clamp intermediate luminance value to 0-255 range
        lum = Math.max(0, Math.min(255, lum));

        // 4. Apply Tint
        // The image is essentially made monochrome (based on lum) and then color-tinted.
        // finalColorChannel = (1 - tintStrength) * monochromeValue + tintStrength * tintChannelValue
        let finalR = (1 - TS) * lum + TS * tint.r;
        let finalG = (1 - TS) * lum + TS * tint.g;
        let finalB = (1 - TS) * lum + TS * tint.b;

        // Clamp final RGB values to 0-255 range and round them
        data[i]     = Math.round(Math.max(0, Math.min(255, finalR)));
        data[i + 1] = Math.round(Math.max(0, Math.min(255, finalG)));
        data[i + 2] = Math.round(Math.max(0, Math.min(255, finalB)));
    }

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

    return canvas;
}