Image Minimalist Filter Effect Tool

function processImage(originalImg, levels = 4, applyGrayscale = "false") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true }); // Opt-in for performance with getImageData/putImageData

    // Ensure the image is loaded before trying to get its dimensions
    // This check is more for robustness if the image object might not be fully loaded,
    // though the problem statement implies it's a ready Image object.
    if (!originalImg.complete || originalImg.naturalWidth === 0 || originalImg.naturalHeight === 0) {
        // Fallback or error handling for unloaded/invalid image
        // For this example, we'll create a small placeholder canvas if image is invalid
        // or simply return the empty canvas early.
        // console.error("Image not loaded or invalid.");
        // For a tool, better to draw something or throw error.
        // To keep it simple as per prompt focusing on the filter logic, assuming valid image.
        // If dimensions are 0, it will create a 0x0 canvas.
    }

    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // Parameter parsing and validation
    let numLevels = typeof levels === 'string' ? parseInt(levels, 10) : Number(levels);
    if (isNaN(numLevels) || numLevels < 2) {
        numLevels = 2; // Minimum 2 levels for posterization (e.g., black and white)
    } else if (numLevels > 256) {
        numLevels = 256; // Max 256 levels (no change for 8-bit color)
    }
    // Ensure numLevels is an integer
    numLevels = Math.floor(numLevels);


    const doGrayscale = String(applyGrayscale).toLowerCase() === "true";

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    // If numLevels is 1, it's a special case that our formula `255 / (numLevels - 1)` doesn't handle.
    // We interpret 1 level as effectively 2 levels for posterization, or handle as mid-gray if desired.
    // Given the validation `numLevels < 2` sets `numLevels = 2`, this case is covered.
    // The factor for posterization:
    const factor = 255 / (numLevels - 1);

    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];
        // Alpha (data[i + 3]) is preserved

        if (doGrayscale) {
            // Standard luminance calculation
            const gray = Math.round(0.299 * r + 0.587 * g + 0.114 * b);
            r = gray;
            g = gray;
            b = gray;
        }

        // Apply posterization to each channel
        data[i] = Math.round(r / factor) * factor;
        data[i + 1] = Math.round(g / factor) * factor;
        data[i + 2] = Math.round(b / factor) * factor;
    }

    ctx.putImageData(imageData, 0, 0);

    return canvas;
}