Image To Pixelated Art Converter

function processImage(originalImg, pixelSize = 10, colorPaletteLevels = 8, invertColors = 'false') {
    // Parse configuration parameters
    const size = Math.max(1, parseInt(pixelSize, 10) || 10);
    const paletteLevels = parseInt(colorPaletteLevels, 10);
    const doQuantize = paletteLevels >= 2;
    const factor = doQuantize ? 255 / (paletteLevels - 1) : 0;
    const doReversal = String(invertColors).toLowerCase() === 'true';

    const width = originalImg.width;
    const height = originalImg.height;

    // Set up canvas
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // Draw the original image to extract its pixel data
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Fast-path return if no processing is actually required
    if (size === 1 && !doQuantize && !doReversal) {
        return canvas;
    }

    const imgData = ctx.getImageData(0, 0, width, height);
    const data = imgData.data;
    
    // Create an output buffer for fast array-level pixel manipulation
    const outImgData = ctx.createImageData(width, height);
    const outData = outImgData.data;

    // Process image block by block
    for (let bY = 0; bY < height; bY += size) {
        for (let bX = 0; bX < width; bX += size) {
            
            // Find center of the block for nearest-neighbor style pixelation
            const pxlX = Math.min(bX + Math.floor(size / 2), width - 1);
            const pxlY = Math.min(bY + Math.floor(size / 2), height - 1);
            const srcIdx = (pxlY * width + pxlX) * 4;

            let r = data[srcIdx];
            let g = data[srcIdx + 1];
            let b = data[srcIdx + 2];
            let a = data[srcIdx + 3];

            // Apply color quantization (posterize) to simulate 8-bit/retro art styles
            if (doQuantize) {
                r = Math.round(Math.round(r / factor) * factor);
                g = Math.round(Math.round(g / factor) * factor);
                b = Math.round(Math.round(b / factor) * factor);
            }

            // Apply reversal (negative) if desired
            if (doReversal) {
                r = 255 - r;
                g = 255 - g;
                b = 255 - b;
            }

            // Fill all pixels in this specific block with the processed color
            const endX = Math.min(bX + size, width);
            const endY = Math.min(bY + size, height);

            for (let py = bY; py < endY; py++) {
                const rowOffset = py * width;
                for (let px = bX; px < endX; px++) {
                    const destIdx = (rowOffset + px) * 4;
                    outData[destIdx] = r;
                    outData[destIdx + 1] = g;
                    outData[destIdx + 2] = b;
                    outData[destIdx + 3] = a;
                }
            }
        }
    }

    // Write modified pixel data back to canvas
    ctx.putImageData(outImgData, 0, 0);

    return canvas;
}