Video To Mosaic Effect Tool

function processImage(originalImg, blockSize = "20", tileShape = "square") {
    // Ensure block size is a sensible number
    blockSize = parseInt(blockSize, 10);
    if (isNaN(blockSize) || blockSize < 2) blockSize = 10;

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true });
    
    const w = originalImg.width;
    const h = originalImg.height;
    canvas.width = w;
    canvas.height = h;

    // Draw original image to sample pixel data
    ctx.drawImage(originalImg, 0, 0, w, h);
    const imgData = ctx.getImageData(0, 0, w, h);
    const data = imgData.data;

    // Clear the canvas to prepare for drawing the mosaic effect
    ctx.clearRect(0, 0, w, h);

    // Dynamic resolution step to maintain performance on ultra-high-res images
    const pixelStep = (w * h) > 4000000 ? 2 : 1; 

    // Loop through image in segments defined by blockSize
    for (let y = 0; y < h; y += blockSize) {
        for (let x = 0; x < w; x += blockSize) {
            // Find the actual dimensions for edge blocks
            const bw = Math.min(blockSize, w - x);
            const bh = Math.min(blockSize, h - y);

            let r = 0, g = 0, b = 0, a = 0, count = 0;

            // Sample and average all underlying pixels in the current block
            for (let cy = 0; cy < bh; cy += pixelStep) {
                for (let cx = 0; cx < bw; cx += pixelStep) {
                    const idx = ((y + cy) * w + (x + cx)) * 4;
                    r += data[idx];
                    g += data[idx + 1];
                    b += data[idx + 2];
                    a += data[idx + 3];
                    count++;
                }
            }

            if (count > 0) {
                r = Math.floor(r / count);
                g = Math.floor(g / count);
                b = Math.floor(b / count);
                a = (a / count) / 255;
            }

            ctx.fillStyle = `rgba(${r},${g},${b},${a})`;

            // Draw the specified tile shape
            if (tileShape === "circle") {
                ctx.beginPath();
                const radius = Math.min(bw, bh) / 2;
                ctx.arc(x + bw / 2, y + bh / 2, radius, 0, Math.PI * 2);
                ctx.fill();
            } else if (tileShape === "spacing") {
                // Leaves a 1px gap to simulate real mosaic tiles
                ctx.fillRect(x + 1, y + 1, Math.max(1, bw - 2), Math.max(1, bh - 2));
            } else {
                // Default: Standard pixelated square block
                ctx.fillRect(x, y, bw, bh);
            }
        }
    }

    return canvas;
}