Image Chinese Ink Wash Filter Effect Tool

function processImage(originalImg, levels = 4, blurRadius = 1.0) {
    const w = originalImg.naturalWidth || originalImg.width;
    const h = originalImg.naturalHeight || originalImg.height;

    // Sanitize parameters
    // Levels: Number of distinct shades (1 for grayscale, >=2 for posterization)
    const parsedLevels = Math.max(1, Math.floor(Number(levels)));
    // BlurRadius: Amount of blur in pixels
    const parsedBlurRadius = Math.max(0, Number(blurRadius));

    // Create a canvas for processing
    const canvas = document.createElement('canvas');
    canvas.width = w;
    canvas.height = h;
    const ctx = canvas.getContext('2d');

    // Apply blur if specified. The blur will affect the subsequent drawImage operation.
    // This creates the "wash" or "bleed" effect before color reduction.
    if (parsedBlurRadius > 0) {
        ctx.filter = `blur(${parsedBlurRadius}px)`;
    }
    
    // Draw the original image onto the canvas.
    // If a blur filter was set, the image will be drawn blurred.
    ctx.drawImage(originalImg, 0, 0, w, h);

    // After drawing with a filter, if we want to ensure getImageData gets the filtered pixels
    // and not re-apply the filter on subsequent operations on this context,
    // it's good practice to clear the filter. However, getImageData reads the current bitmap,
    // which should already be filtered.
    // ctx.filter = 'none'; // Optional: clear filter if other drawings were to happen on this ctx

    // Get image data from the canvas (pixels are potentially blurred at this stage)
    const imageData = ctx.getImageData(0, 0, w, h);
    const data = imageData.data;

    // Process each pixel
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];

        // Convert to grayscale using the luminance method
        // This gray value is derived from the (potentially) blurred image data
        let gray = 0.299 * r + 0.587 * g + 0.114 * b;

        // Apply posterization if parsedLevels > 1
        // Posterization reduces the number of distinct color shades to simulate ink dilutions
        if (parsedLevels > 1) {
            // The number of segments in the 0-255 range is (parsedLevels - 1)
            // The value of each step in the posterized color palette
            const stepValue = 255 / (parsedLevels - 1);
            
            // Map the grayscale value to the nearest shade in the posterized palette
            gray = Math.round(gray / stepValue) * stepValue;
            
            // Ensure the value is clamped to the [0, 255] range, though mathematically it should be.
            gray = Math.min(255, Math.max(0, gray));
        }
        // If parsedLevels === 1, 'gray' remains the pure grayscale value (no posterization applied).

        // Set the R, G, B channels to the new gray value
        data[i] = gray;     // Red
        data[i + 1] = gray; // Green
        data[i + 2] = gray; // Blue
        // Alpha channel (data[i+3]) remains unchanged
    }

    // Put the modified image data (grayscaled and posterized) back onto the canvas
    ctx.putImageData(imageData, 0, 0);

    // The canvas now holds the image with the Chinese Ink Wash effect
    return canvas;
}