Image To Hyperrealistic Art Generator

/**
 * Applies a "hyperrealistic" effect to an image by enhancing sharpness, clarity, vibrance, and adding a vignette.
 * This effect mimics the aesthetic of hyperrealistic art by making details pop and colors more vivid.
 * 
 * @param {HTMLImageElement} originalImg The original image element.
 * @param {number} sharpness The amount of fine detail sharpening to apply. Range 0 to 2. Default is 0.8.
 * @param {number} clarity The amount of local contrast enhancement. This makes textures stand out. Range 0 to 2. Default is 0.4.
 * @param {number} vibrance The intensity of color boosting, smartly saturating less colorful areas more. Range 0 to 1. Default is 0.3.
 * @param {number} vignette The strength of the dark vignette effect at the corners. Range 0 to 1. Default is 0.25.
 * @returns {HTMLCanvasElement} A new canvas element with the hyperrealistic effect applied.
 */
function processImage(originalImg, sharpness = 0.8, clarity = 0.4, vibrance = 0.3, vignette = 0.25) {

    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;

    const canvas = document.createElement('canvas');
    canvas.width = w;
    canvas.height = h;
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // --- Helper functions for color manipulation ---
    const rgbToHsl = (r, g, b) => {
        r /= 255; g /= 255; b /= 255;
        const max = Math.max(r, g, b), min = Math.min(r, g, b);
        let h = 0, s, l = (max + min) / 2;
        if (max === min) {
            h = s = 0; // achromatic
        } else {
            const d = max - min;
            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
            switch (max) {
                case r: h = (g - b) / d + (g < b ? 6 : 0); break;
                case g: h = (b - r) / d + 2; break;
                case b: h = (r - g) / d + 4; break;
            }
            h /= 6;
        }
        return [h, s, l];
    };

    const hslToRgb = (h, s, l) => {
        let r, g, b;
        if (s === 0) {
            r = g = b = l; // achromatic
        } else {
            const hue2rgb = (p, q, t) => {
                if (t < 0) t += 1;
                if (t > 1) t -= 1;
                if (t < 1 / 6) return p + (q - p) * 6 * t;
                if (t < 1 / 2) return q;
                if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
                return p;
            };
            const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
            const p = 2 * l - q;
            r = hue2rgb(p, q, h + 1 / 3);
            g = hue2rgb(p, q, h);
            b = hue2rgb(p, q, h - 1 / 3);
        }
        return [r * 255, g * 255, b * 255];
    };


    // --- Step 1: Create a blurred version for Unsharp Mask ---
    const blurCanvas = document.createElement('canvas');
    blurCanvas.width = w;
    blurCanvas.height = h;
    const blurCtx = blurCanvas.getContext('2d', { willReadFrequently: true });
    
    // Use a small blur radius, proportional to image size, for the clarity effect
    const blurRadius = Math.max(1, Math.min(w, h) / 400);
    blurCtx.filter = `blur(${blurRadius}px)`;
    blurCtx.drawImage(originalImg, 0, 0);

    // --- Step 2: Draw original image to main canvas ---
    ctx.drawImage(originalImg, 0, 0);

    // --- Step 3: Get pixel data for manipulation ---
    const originalData = ctx.getImageData(0, 0, w, h);
    const blurredData = blurCtx.getImageData(0, 0, w, h);
    const finalImageData = ctx.createImageData(w, h);

    const strength = (sharpness + clarity);

    // --- Step 4: Process each pixel ---
    for (let i = 0; i < originalData.data.length; i += 4) {
        // --- Unsharp Mask (Sharpness + Clarity) ---
        // Get original pixel colors
        const r = originalData.data[i];
        const g = originalData.data[i + 1];
        const b = originalData.data[i + 2];

        // Calculate the "detail" by subtracting the blurred image from the original
        const rDetail = r - blurredData.data[i];
        const gDetail = g - blurredData.data[i + 1];
        const bDetail = b - blurredData.data[i + 2];

        // Add the scaled detail back to the original pixel
        let newR = r + rDetail * strength;
        let newG = g + gDetail * strength;
        let newB = b + bDetail * strength;

        // --- Vibrance Enhancement ---
        if (vibrance > 0) {
            const hsl = rgbToHsl(newR, newG, newB);
            let s = hsl[1];
            // Increase saturation more for less saturated colors
            const saturationIncrease = (1 - Math.pow(1 - s, 2)) * vibrance;
            s += saturationIncrease;
            s = Math.max(0, Math.min(1, s)); // Clamp saturation between 0 and 1

            const newRgb = hslToRgb(hsl[0], s, hsl[2]);
            newR = newRgb[0];
            newG = newRgb[1];
            newB = newRgb[2];
        }

        // Clamp values to the 0-255 range and apply to the final image data
        finalImageData.data[i] = Math.max(0, Math.min(255, newR));
        finalImageData.data[i + 1] = Math.max(0, Math.min(255, newG));
        finalImageData.data[i + 2] = Math.max(0, Math.min(255, newB));
        finalImageData.data[i + 3] = originalData.data[i + 3]; // Preserve alpha
    }

    // --- Step 5: Put the processed pixel data back on the canvas ---
    ctx.putImageData(finalImageData, 0, 0);

    // --- Step 6: Apply Vignette ---
    if (vignette > 0) {
        const outerRadius = Math.sqrt(w * w + h * h) / 2;
        const gradient = ctx.createRadialGradient(w / 2, h / 2, outerRadius * 0.2, w / 2, h / 2, outerRadius);
        gradient.addColorStop(0, 'rgba(0,0,0,0)');
        gradient.addColorStop(1, `rgba(0,0,0,${Math.min(1, vignette)})`);
        
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, w, h);
    }
    
    return canvas;
}