Image Waiting Time Eliminator

/**
 * Applies a pixelation effect to an image, simulating a fast, low-quality load
 * to metaphorically "eliminate waiting time".
 * The original image is downscaled and then scaled back up without anti-aliasing,
 * creating a blocky, retro effect.
 *
 * @param {HTMLImageElement} originalImg The original source image object.
 * @param {number} blockSize The size of the pixel blocks. A larger number results in more pronounced pixelation. Defaults to 10.
 * @returns {HTMLCanvasElement} A new canvas element displaying the pixelated image.
 */
function processImage(originalImg, blockSize = 10) {
    // Ensure blockSize is a positive integer greater than or equal to 1.
    const size = Math.max(1, Math.floor(blockSize));

    const originalWidth = originalImg.naturalWidth || originalImg.width;
    const originalHeight = originalImg.naturalHeight || originalImg.height;

    // Create the final canvas that will be returned.
    const canvas = document.createElement('canvas');
    canvas.width = originalWidth;
    canvas.height = originalHeight;
    const ctx = canvas.getContext('2d');

    // Calculate dimensions for a temporary smaller canvas.
    // The image will be scaled down to this size.
    const smallWidth = Math.ceil(originalWidth / size);
    const smallHeight = Math.ceil(originalHeight / size);

    // Create a temporary canvas to draw the downscaled image.
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = smallWidth;
    tempCanvas.height = smallHeight;
    const tempCtx = tempCanvas.getContext('2d');

    // Draw the original image onto the small canvas. The browser's scaling
    // algorithm will effectively average out the colors.
    tempCtx.drawImage(originalImg, 0, 0, smallWidth, smallHeight);

    // Disable image smoothing on the final canvas. This is crucial for
    // achieving the sharp, blocky pixel effect when we scale up.
    ctx.imageSmoothingEnabled = false;
    // Set for cross-browser compatibility
    ctx.webkitImageSmoothingEnabled = false;
    ctx.mozImageSmoothingEnabled = false;

    // Draw the small image from the temporary canvas onto the main canvas,
    // scaling it back up to the original size. Since smoothing is off,
    // it will appear pixelated.
    ctx.drawImage(tempCanvas, 0, 0, smallWidth, smallHeight, 0, 0, originalWidth, originalHeight);

    return canvas;
}