Image 1001 Utility Tool

/**
 * Creates a mosaic effect on an image, inspired by the name "1001".
 * The image is divided into a grid of tiles, and each tile is replaced by a
 * shape filled with the average color of that tile's area. The total number
 * of tiles is approximately 1001 by default.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {number} [numTiles=1001] The approximate number of tiles to divide the image into.
 * @param {string} [shape='circle'] The shape of the tiles. Can be 'circle', 'square', or 'diamond'.
 * @param {number} [gap=1] The size of the gap between tiles in pixels.
 * @returns {HTMLCanvasElement} A new canvas element with the mosaic effect rendered on it.
 */
function processImage(originalImg, numTiles = 1001, shape = 'circle', gap = 1) {
    const w = originalImg.width;
    const h = originalImg.height;

    // Create a canvas to draw the final result
    const canvas = document.createElement('canvas');
    canvas.width = w;
    canvas.height = h;
    const ctx = canvas.getContext('2d');

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

    // Calculate the ideal cell size to achieve approximately numTiles
    if (numTiles < 1) numTiles = 1;
    const idealCellArea = (w * h) / numTiles;
    let cellSize = Math.round(Math.sqrt(idealCellArea));
    if (cellSize < 1) cellSize = 1;
    
    // Clear the canvas. This makes the background transparent, so the gaps
    // between shapes will be transparent.
    ctx.clearRect(0, 0, w, h);

    // Iterate over the image in a grid of cells
    for (let y = 0; y < h; y += cellSize) {
        for (let x = 0; x < w; x += cellSize) {
            
            // Determine the actual size of the current cell, which can be smaller at the image edges
            const cellW = Math.min(cellSize, w - x);
            const cellH = Math.min(cellSize, h - y);
            if (cellW <= 0 || cellH <= 0) continue;

            // Get the pixel data for the current cell
            const imageData = tempCtx.getImageData(x, y, cellW, cellH);
            const data = imageData.data;
            
            // Calculate the average color of the cell
            let r_sum = 0, g_sum = 0, b_sum = 0, a_sum = 0;
            let pixelCount = 0;
            for (let i = 0; i < data.length; i += 4) {
                 // Only consider non-transparent pixels for the color average
                if (data[i + 3] > 0) {
                    r_sum += data[i];
                    g_sum += data[i + 1];
                    b_sum += data[i + 2];
                    a_sum += data[i + 3];
                    pixelCount++;
                }
            }
            
            // If the cell contains non-transparent pixels, draw the corresponding shape
            if (pixelCount > 0) {
                const avgR = Math.round(r_sum / pixelCount);
                const avgG = Math.round(g_sum / pixelCount);
                const avgB = Math.round(b_sum / pixelCount);
                const avgA = (a_sum / pixelCount) / 255;
                ctx.fillStyle = `rgba(${avgR}, ${avgG}, ${avgB}, ${avgA})`;

                const drawSize = Math.max(0, cellSize - gap);
                const centerX = x + cellSize / 2;
                const centerY = y + cellSize / 2;

                // Draw the selected shape
                switch (shape.toLowerCase()) {
                    case 'square':
                        ctx.fillRect(x + (cellSize - drawSize) / 2, y + (cellSize - drawSize) / 2, drawSize, drawSize);
                        break;
                    
                    case 'diamond':
                        const halfSize = drawSize / 2;
                        ctx.beginPath();
                        ctx.moveTo(centerX, centerY - halfSize); // top
                        ctx.lineTo(centerX + halfSize, centerY); // right
                        ctx.lineTo(centerX, centerY + halfSize); // bottom
                        ctx.lineTo(centerX - halfSize, centerY); // left
                        ctx.closePath();
                        ctx.fill();
                        break;

                    case 'circle':
                    default:
                        ctx.beginPath();
                        ctx.arc(centerX, centerY, drawSize / 2, 0, 2 * Math.PI);
                        ctx.fill();
                        break;
                }
            }
        }
    }

    return canvas;
}