Image Pixel Art Filter Effect Tool

function processImage(originalImg, pixelSize = 10) {
    // Get original image dimensions
    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;

    // Handle cases where image dimensions are zero (e.g., image not loaded or invalid)
    if (w === 0 || h === 0) {
        const emptyCanvas = document.createElement('canvas');
        emptyCanvas.width = 0;
        emptyCanvas.height = 0;
        return emptyCanvas;
    }

    // Sanitize pixelSize parameter
    // The `pixelSize` parameter has a default of 10 from the function signature.
    // This line ensures `pSize` becomes an integer greater than or equal to 1.
    // - If `pixelSize` is a valid positive number (e.g., 5), `pSize` becomes 5.
    // - If `pixelSize` is a string number (e.g., "8"), `pSize` becomes 8.
    // - If `pixelSize` is non-numeric (e.g., "foo") or null/undefined, `parseInt` yields NaN. `NaN || 10` results in 10. `Math.max(1, 10)` is 10.
    // - If `pixelSize` is 0, `parseInt` is 0. `0 || 10` results in 10. `Math.max(1, 10)` is 10.
    // - If `pixelSize` is negative (e.g., -5), `parseInt` is -5. `-5 || 10` results in -5. `Math.max(1, -5)` is 1.
    const pSize = Math.max(1, parseInt(String(pixelSize), 10) || 10);

    // Create the output canvas with the same dimensions as the original image
    const outputCanvas = document.createElement('canvas');
    outputCanvas.width = w;
    outputCanvas.height = h;
    const ctx = outputCanvas.getContext('2d');

    // Calculate dimensions for the temporary small canvas
    // This canvas will hold the downscaled version of the image.
    // Using Math.ceil ensures that the entire image is covered by temp pixels.
    // Math.max(1, ...) ensures dimensions are at least 1 to prevent errors with 0-sized canvases.
    const tempWidth = Math.max(1, Math.ceil(w / pSize));
    const tempHeight = Math.max(1, Math.ceil(h / pSize));

    // Create the temporary canvas
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = tempWidth;
    tempCanvas.height = tempHeight;
    const tempCtx = tempCanvas.getContext('2d');

    // Draw the original image onto the temporary canvas, scaled down.
    // This is where the "pixelation" effectively happens by reducing resolution.
    // For truly "nearest-neighbor" downscaling, smoothing could be disabled on tempCtx too,
    // but default browser behavior for downscaling is often acceptable.
    // tempCtx.imageSmoothingEnabled = false; (and vendor prefixes if strictness is needed)
    tempCtx.drawImage(originalImg, 0, 0, w, h, 0, 0, tempWidth, tempHeight);

    // Disable image smoothing on the output canvas.
    // This is crucial for achieving the sharp, blocky effect when upscaling.
    ctx.imageSmoothingEnabled = false;
    // Apply prefixed versions for cross-browser compatibility
    if (typeof ctx.mozImageSmoothingEnabled !== 'undefined') {
        ctx.mozImageSmoothingEnabled = false;
    }
    if (typeof ctx.webkitImageSmoothingEnabled !== 'undefined') {
        ctx.webkitImageSmoothingEnabled = false;
    }
    if (typeof ctx.msImageSmoothingEnabled !== 'undefined') {
        ctx.msImageSmoothingEnabled = false;
    }

    // Draw the small, pixelated image from tempCanvas onto the outputCanvas, scaled up.
    // The disabled image smoothing will cause nearest-neighbor interpolation, creating the pixel art effect.
    ctx.drawImage(tempCanvas, 0, 0, tempWidth, tempHeight, 0, 0, w, h);

    return outputCanvas;
}