Image Detail And Clarity Enhancer

function processImage(originalImg, detailAmount = 50, clarityAmount = 30, contrast = 10) {
    // Ensure parameters are numbers and clamped to sensible bounds
    detailAmount = Math.max(0, Math.min(100, Number(detailAmount)));
    clarityAmount = Math.max(0, Math.min(100, Number(clarityAmount)));
    contrast = Math.max(-100, Math.min(100, Number(contrast)));

    const width = originalImg.width;
    const height = originalImg.height;

    // Create the main output canvas
    const mainCanvas = document.createElement('canvas');
    mainCanvas.width = width;
    mainCanvas.height = height;
    const ctx = mainCanvas.getContext('2d', { willReadFrequently: true });
    
    // Draw the untouched image onto the main canvas
    ctx.drawImage(originalImg, 0, 0);
    
    // Create a temporary canvas explicitly for generating blur maps hardware-accelerated
    const blurCanvas = document.createElement('canvas');
    blurCanvas.width = width;
    blurCanvas.height = height;
    const blurCtx = blurCanvas.getContext('2d', { willReadFrequently: true });

    // Fetch original pixel data and create an immutable duplicate to reference later
    const imgDataOrig = ctx.getImageData(0, 0, width, height);
    const dataOrig = new Uint8ClampedArray(imgDataOrig.data); 

    // Generate Detail Map (Low Radius Blur)
    blurCtx.filter = 'blur(1px)';
    blurCtx.clearRect(0, 0, width, height);
    blurCtx.drawImage(originalImg, 0, 0);
    const dataDetail = blurCtx.getImageData(0, 0, width, height).data;

    // Generate Clarity Map (High Radius Blur)
    blurCtx.filter = 'blur(10px)';
    blurCtx.clearRect(0, 0, width, height);
    blurCtx.drawImage(originalImg, 0, 0);
    const dataClarity = blurCtx.getImageData(0, 0, width, height).data;

    // Convert parameter scales to realistic multiples
    // Detail acts like a standard unsharp mask (small radius)
    const dAmt = (detailAmount / 100) * 1.5; 
    // Clarity acts on medium-frequency areas (large radius)
    const cAmt = (clarityAmount / 100) * 1.0; 

    // Global contrast calculation
    // Scale user contrast (-100 to 100) to actual adjustment level
    const cVal = (contrast / 100) * 60; 
    const factor = (259 * (cVal + 255)) / (255 * (259 - cVal));

    const dataOut = imgDataOrig.data; 

    // Iterate through all pixels and merge details, clarity, and contrast
    for (let i = 0; i < dataOut.length; i += 4) {
        // Base Original Value + Detail Difference + Clarity Difference
        let r = dataOrig[i]   + (dataOrig[i]   - dataDetail[i])   * dAmt + (dataOrig[i]   - dataClarity[i])   * cAmt;
        let g = dataOrig[i+1] + (dataOrig[i+1] - dataDetail[i+1]) * dAmt + (dataOrig[i+1] - dataClarity[i+1]) * cAmt;
        let b = dataOrig[i+2] + (dataOrig[i+2] - dataDetail[i+2]) * dAmt + (dataOrig[i+2] - dataClarity[i+2]) * cAmt;

        // Apply contrast factor
        r = factor * (r - 128) + 128;
        g = factor * (g - 128) + 128;
        b = factor * (b - 128) + 128;

        // Uint8ClampedArray handles integer rounding and bounds clamping (0-255) automatically
        dataOut[i]   = r; 
        dataOut[i+1] = g;
        dataOut[i+2] = b;
        // Alpha (dataOut[i+3]) is deliberately skipped to remain strictly unmodified
    }

    // Paint the adjusted pixels directly back to the main canvas
    ctx.putImageData(imgDataOrig, 0, 0);

    return mainCanvas;
}