Image Character Generator

/**
 * Transforms an image into a pixelated, retro-style "character" sprite.
 * This is achieved by dividing the image into blocks, calculating the average
 * color of each block, and then quantizing the color to a limited palette.
 *
 * @param {HTMLImageElement} originalImg The original image element to process.
 * @param {number} [pixelSize=10] The size of each pixel block in the output image. Larger values result in a more abstract, blocky look.
 * @param {number} [posterizationLevels=4] The number of color values per channel (Red, Green, Blue). A lower number reduces the color palette, creating a more retro feel.
 * @returns {HTMLCanvasElement} A new canvas element displaying the generated character sprite.
 */
function processImage(originalImg, pixelSize = 10, posterizationLevels = 4) {
    // Ensure parameters are valid numbers with sensible minimums
    const pSize = Math.max(1, parseInt(pixelSize, 10) || 10);
    const pLevels = Math.max(2, parseInt(posterizationLevels, 10) || 4);

    const {
        width,
        height
    } = originalImg;

    // Create a temporary canvas to draw the original image for pixel data access
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = width;
    tempCanvas.height = height;
    const tempCtx = tempCanvas.getContext('2d', {
        willReadFrequently: true
    }); // Optimization hint for browsers
    tempCtx.drawImage(originalImg, 0, 0);

    // Create the final output canvas
    const outputCanvas = document.createElement('canvas');
    outputCanvas.width = width;
    outputCanvas.height = height;
    const outputCtx = outputCanvas.getContext('2d');
    outputCtx.imageSmoothingEnabled = false; // Ensure sharp pixel edges

    // Loop through the image in blocks defined by pixelSize
    for (let y = 0; y < height; y += pSize) {
        for (let x = 0; x < width; x += pSize) {
            // Determine the actual size of the block to sample, handling edges
            const blockWidth = Math.min(pSize, width - x);
            const blockHeight = Math.min(pSize, height - y);

            if (blockWidth <= 0 || blockHeight <= 0) continue;

            // Get the pixel data for the current block from the temporary canvas
            const imageData = tempCtx.getImageData(x, y, blockWidth, blockHeight);
            const data = imageData.data;
            let totalR = 0,
                totalG = 0,
                totalB = 0,
                totalA = 0;

            // Sum the color values of all pixels in the block
            for (let i = 0; i < data.length; i += 4) {
                totalR += data[i];
                totalG += data[i + 1];
                totalB += data[i + 2];
                totalA += data[i + 3];
            }

            const numPixelsInBlock = data.length / 4;
            if (numPixelsInBlock === 0) continue;

            // Calculate the average color of the block
            const avgR = totalR / numPixelsInBlock;
            const avgG = totalG / numPixelsInBlock;
            const avgB = totalB / numPixelsInBlock;
            const avgA = totalA / numPixelsInBlock;

            // Posterize the color to reduce the palette
            const levels = pLevels - 1;
            const finalR = Math.round(avgR / 255 * levels) * (255 / levels);
            const finalG = Math.round(avgG / 255 * levels) * (255 / levels);
            const finalB = Math.round(avgB / 255 * levels) * (255 / levels);

            // Set the fill style to the calculated color
            outputCtx.fillStyle = `rgba(${finalR}, ${finalG}, ${finalB}, ${avgA / 255})`;

            // Draw the colored block on the output canvas
            // Use pSize for width and height to ensure a uniform grid
            outputCtx.fillRect(x, y, pSize, pSize);
        }
    }

    return outputCanvas;
}