Image Rock Candy Filter Effect Tool

function processImage(originalImg, posterizeLevels = 5, saturationBoost = 1.5, grainAmount = 10) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure the canvas has the same dimensions as the image
    // Use naturalWidth/Height if available (for <img> elements), fallback to width/height
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // Get the pixel data from the canvas
    // Using { willReadFrequently: true } can be a performance hint for some browsers,
    // but it's omitted here for broader compatibility as its impact varies.
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    // Prepare posterization parameters
    // Ensure posterizeLevels is at least 2 for the formula to be meaningful for distinct levels.
    // Levels < 2 (e.g., 1) will be treated as 2 levels (e.g., high/low contrast).
    const actualPosterizeLevels = Math.max(2, posterizeLevels);
    
    // Posterization is only applied if levels are meaningfully reducing colors (i.e., < 256 levels).
    // 256 levels means 2^8, which is the full range for an 8-bit channel, so no change.
    const applyPosterization = actualPosterizeLevels < 256;
    const pFactor = applyPosterization ? (255 / (actualPosterizeLevels - 1)) : 1; // if not applying, factor of 1 effectively means no change.

    // Prepare saturation parameter
    // Ensure saturationBoost is not negative. 0 means grayscale, 1 means no change.
    const effectiveSaturationBoost = Math.max(0, saturationBoost);

    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

        // Step 1: Posterization
        if (applyPosterization) {
            r = Math.round(r / pFactor) * pFactor;
            g = Math.round(g / pFactor) * pFactor;
            b = Math.round(b / pFactor) * pFactor;
        }

        // Step 2: Saturation Boost (Luma-based)
        // Applied on (potentially) posterized colors.
        if (effectiveSaturationBoost !== 1.0) { // Skip if no saturation change
            // Standard Rec. 601 luma coefficients
            const luma = 0.299 * r + 0.587 * g + 0.114 * b;
            
            r = luma + effectiveSaturationBoost * (r - luma);
            g = luma + effectiveSaturationBoost * (g - luma);
            b = luma + effectiveSaturationBoost * (b - luma);
        }

        // Step 3: Grain
        // Applied on (potentially) posterized and saturated colors.
        if (grainAmount > 0) {
            // Generate noise between -grainAmount/2 and +grainAmount/2
            const noise = (Math.random() - 0.5) * grainAmount; 
            r += noise;
            g += noise;
            b += noise;
        }
        
        // Clamp all color channels to [0, 255] and round to integers
        data[i] = Math.max(0, Math.min(255, Math.round(r)));
        data[i + 1] = Math.max(0, Math.min(255, Math.round(g)));
        data[i + 2] = Math.max(0, Math.min(255, Math.round(b)));
    }

    // Put the modified pixel data back onto the canvas
    ctx.putImageData(imageData, 0, 0);

    return canvas;
}