Image Posterize And Solarize Tool

function processImage(originalImg, posterizeLevels = 4, solarizeThreshold = 128) {
    // Create a working canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Set dimensions to match the original image
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    
    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0);
    
    // Get the pixel data from the canvas
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    
    // Parse and constrain posterize levels (2 to 256)
    // A value of 256 means essentially no posterization is applied.
    let levels = parseInt(posterizeLevels, 10);
    if (isNaN(levels) || levels < 2) levels = 2;
    if (levels > 256) levels = 256;
    
    // Parse and constrain solarize threshold (0 to 255)
    // A value of 255 means essentially no solarization is applied.
    let threshold = parseInt(solarizeThreshold, 10);
    if (isNaN(threshold)) threshold = 128;
    if (threshold < 0) threshold = 0;
    if (threshold > 255) threshold = 255;

    // Precalculate posterize step values for speed
    const levelFactor = (levels - 1);
    const step = 255 / levelFactor;

    // Loop through all pixels (each pixel is 4 array entries: R, G, B, A)
    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];

        // 1. Apply Posterize Effect
        r = Math.round((r / 255) * levelFactor) * step;
        g = Math.round((g / 255) * levelFactor) * step;
        b = Math.round((b / 255) * levelFactor) * step;

        // 2. Apply Solarize Effect (invert if magnitude exceeds threshold)
        if (r >= threshold) r = 255 - r;
        if (g >= threshold) g = 255 - g;
        if (b >= threshold) b = 255 - b;

        // Reassign the modified values back to the ImageData array
        data[i] = r;
        data[i + 1] = g;
        data[i + 2] = b;
        // data[i + 3] is the alpha channel; we leave it unchanged
    }

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