Please bookmark this page to avoid losing your image tool!

Image Utility Pole Filter Effect

(Free & Supports Bulk Upload)

Drag & drop your images here or

The result will appear here...
You can edit the below JavaScript code to customize the image tool.
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;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Description

The Image Utility Pole Filter Effect tool allows users to enhance their images by adjusting the contrast and brightness, and applying a customizable color tint. This can be particularly useful for photographers and graphic designers looking to create unique visual styles or to rectify images that may appear dull or unappealing. Users can select the degree of contrast and brightness correction, as well as the color and intensity of the tint applied, making it versatile for a range of aesthetic adjustments.

Leave a Reply

Your email address will not be published. Required fields are marked *