Please bookmark this page to avoid losing your image tool!

Icon TV Quality Image Enhancer

(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, noiseLevel = 0.15, scanlineIntensity = 0.25, rgbOffset = 3) {
    // Parse parameters to ensure they are the correct type even if passed as strings
    const noise = parseFloat(noiseLevel);
    const scanlines = parseFloat(scanlineIntensity);
    const shift = parseInt(rgbOffset, 10);

    // Create a canvas to apply the "TV Quality" / CRT effect
    const canvas = document.createElement('canvas');
    const width = originalImg.width;
    const height = originalImg.height;
    
    canvas.width = width;
    canvas.height = height;

    const ctx = canvas.getContext('2d');
    
    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Fetch the image data to manipulate at the pixel level
    const imgData = ctx.getImageData(0, 0, width, height);
    const data = imgData.data;
    
    // Create a copy to sample original pixels for the chromatic aberration (RGB shift)
    const copy = new Uint8ClampedArray(data);

    // Calculate center coordinates and max distance for vignette effect
    const cx = width / 2;
    const cy = height / 2;
    const maxDist = Math.sqrt(cx * cx + cy * cy);

    for (let y = 0; y < height; y++) {
        // Calculate the scanline multiplier for the current row using a sine wave
        const scanlineMultiplier = 1 - (Math.sin(y * 1.5) * 0.5 + 0.5) * scanlines;

        for (let x = 0; x < width; x++) {
            const index = (y * width + x) * 4;

            // Chromatic Aberration: Shift Red left and Blue right
            const rIndex = (y * width + Math.max(0, x - shift)) * 4;
            const bIndex = (y * width + Math.min(width - 1, x + shift)) * 4;

            let r = copy[rIndex];     // Red from shifted position
            let g = copy[index + 1];  // Green from current position
            let b = copy[bIndex + 2]; // Blue from shifted position

            // Apply TV static noise
            const staticNoise = (Math.random() - 0.5) * 255 * noise;
            r += staticNoise;
            g += staticNoise;
            b += staticNoise;

            // Apply CRT scanlines effect
            r *= scanlineMultiplier;
            g *= scanlineMultiplier;
            b *= scanlineMultiplier;

            // Apply a subtle vignette to simulate TV tube screen corners shadowing
            const dx = x - cx;
            const dy = y - cy;
            const dist = Math.sqrt(dx * dx + dy * dy);
            // Vignette multiplier shrinks slightly towards the edges
            const vignette = 1 - Math.pow(dist / maxDist, 2) * 0.4; 

            r *= vignette;
            g *= vignette;
            b *= vignette;

            // Set final pixel values safely back to the data array
            data[index] = r;
            data[index + 1] = g;
            data[index + 2] = b;
            // The alpha channel (data[index + 3]) remains unmodified
        }
    }

    // Apply the manipulated image data back to the canvas context
    ctx.putImageData(imgData, 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 Icon TV Quality Image Enhancer is a tool designed to apply retro television and CRT monitor effects to your images. It simulates classic analog aesthetics by incorporating elements such as scanlines, chromatic aberration (RGB shifting), film grain/static noise, and a vignette effect to mimic the shadowing found on old tube screens. This tool is ideal for graphic designers, content creators, or social media users looking to give their photos a nostalgic, vintage, or lo-fi aesthetic for creative projects.

Leave a Reply

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