Image Minecraft-Style Filter Effect Tool

/**
 * Applies a Minecraft-style pixelation filter effect to an image.
 * This effect is achieved by dividing the image into square blocks
 * and coloring each block with the color of its top-left pixel from the original image.
 *
 * @param {Image} originalImg The original Image object. It's assumed this image is fully loaded.
 *                            If the image is not loaded or has zero dimensions, an empty
 *                            canvas of the same (zero) dimensions will be returned.
 * @param {number} [blockSize=10] The size of the square "pixels" or blocks.
 *                                  A larger value results in a more coarse (blockier) pixelation.
 *                                  The value will be floored to an integer and clamped to a minimum of 1.
 * @returns {HTMLCanvasElement} A new canvas element with the Minecraft-style effect applied.
 */
function processImage(originalImg, blockSize = 10) {
    // Ensure blockSize is a positive integer, at least 1.
    // Math.floor handles non-integer inputs, Math.max ensures it's at least 1.
    blockSize = Math.max(1, Math.floor(blockSize));

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height if available (for HTMLImageElement), otherwise width/height.
    // For an Image object, width/height should be the loaded dimensions.
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // If the image has no dimensions (e.g., not loaded or an empty image),
    // return the canvas (which will be 0x0).
    if (imgWidth === 0 || imgHeight === 0) {
        return canvas;
    }

    // Draw the original image onto the canvas.
    // This is done for two reasons:
    // 1. To have the image content available for getImageData.
    // 2. The parts of the image that are smaller than blockSize at the edges
    //    will implicitly retain their original look if not perfectly covered by blocks,
    //    though current logic with currentBlockWidth/Height ensures all areas are covered.
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    // Iterate over the image in blocks based on blockSize
    for (let y = 0; y < imgHeight; y += blockSize) {
        for (let x = 0; x < imgWidth; x += blockSize) {
            // Determine the actual dimensions of the current block.
            // This is important for blocks at the right and bottom edges of the image,
            // which might be smaller than the specified blockSize if the image dimensions
            // are not perfectly divisible by blockSize.
            const currentBlockWidth = Math.min(blockSize, imgWidth - x);
            const currentBlockHeight = Math.min(blockSize, imgHeight - y);

            // Get the color of the top-left pixel of the current block.
            // (x, y) are the coordinates of the top-left corner of the block.
            // ctx.getImageData(x, y, 1, 1) samples a 1x1 pixel area from the canvas
            // at this position. Since we drew the original image first, this samples
            // from the original image.
            const pixelData = ctx.getImageData(x, y, 1, 1).data;
            const r = pixelData[0]; // Red channel
            const g = pixelData[1]; // Green channel
            const b = pixelData[2]; // Blue channel
            const a = pixelData[3] / 255; // Alpha channel (normalized to 0.0-1.0)

            // Set the fill style to the sampled color (including alpha for transparency).
            ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`;

            // Fill a rectangle representing the block with the sampled color.
            // This overwrites the portion of the original image on the canvas
            // with the solid-colored block.
            ctx.fillRect(x, y, currentBlockWidth, currentBlockHeight);
        }
    }

    return canvas;
}