Please bookmark this page to avoid losing your image tool!

Posterize Bands Image Effect Generator

(Free & Supports Bulk Upload)

The result will appear here...

JavaScript Code (For Advanced Users)

You can edit the below JavaScript code to customize the image tool.

function processImage(originalImg, levels = 4) {
    // Ensure levels is a valid number, with a minimum of 2 levels per channel
    let parsedLevels = parseInt(levels, 10);
    if (isNaN(parsedLevels) || parsedLevels < 2) {
        parsedLevels = 4;
    }

    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width || originalImg.naturalWidth;
    canvas.height = originalImg.height || originalImg.naturalHeight;
    
    // Return empty canvas if image has no dimensions
    if (canvas.width === 0 || canvas.height === 0) {
        return canvas;
    }

    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imgData.data;
    
    const levelFactor = parsedLevels - 1;
    const step = 255 / levelFactor;

    // Precompute a quantization lookup table to optimize performance
    const lookupTable = new Uint8Array(256);
    for (let i = 0; i < 256; i++) {
        lookupTable[i] = Math.round(Math.round((i / 255) * levelFactor) * step);
    }

    // Apply the posterize effect by quantizing R, G, and B channels
    for (let i = 0; i < data.length; i += 4) {
        data[i]     = lookupTable[data[i]];       // Red
        data[i + 1] = lookupTable[data[i + 1]];   // Green
        data[i + 2] = lookupTable[data[i + 2]];   // Blue
        // data[i + 3] (Alpha) is left unchanged to preserve image transparency
    }

    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!

Create a custom image tool

Description

The Posterize Bands Image Effect Generator applies a posterization effect to images by reducing the number of color levels available in the RGB channels. By quantizing colors into a specific number of discrete bands, the tool creates a stylized, high-contrast look similar to screen printing or pop art. This tool is useful for graphic designers looking to create artistic filters, social media creators wanting a retro aesthetic, or digital artists seeking to simplify color palettes for specific visual styles.

JavaScript Code (For Advanced Users)

Free Image Tool Creator

Description

Leave a Reply Cancel reply

Other Image Tools: