Sohone Major Image Effect Generator

function processImage(originalImg, intensity = 1.0) {
    const canvas = document.createElement('canvas');
    const width = originalImg.width;
    const height = originalImg.height;
    
    canvas.width = width;
    canvas.height = height;
    
    const ctx = canvas.getContext('2d');
    
    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, width, height);
    
    const intensityVal = parseFloat(intensity);
    if (isNaN(intensityVal) || intensityVal === 0) {
        return canvas; // Return unmodified if intensity is 0 or invalid
    }
    
    // 1. Pixel manipulation for Color Grading (Contrast, Warmth, Desaturation)
    const imgData = ctx.getImageData(0, 0, width, height);
    const data = imgData.data;
    
    // Calculate contrast factor (standard algorithm)
    const contrastAmount = 25 * intensityVal; // Moderate contrast boost
    const factor = (259 * (contrastAmount + 255)) / (255 * (259 - contrastAmount));
    
    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i+1];
        let b = data[i+2];
        
        // Apply Contrast
        r = factor * (r - 128) + 128;
        g = factor * (g - 128) + 128;
        b = factor * (b - 128) + 128;
        
        // Apply Warm Tint (Sohone effect signature: warm highlights, cooler shadows)
        r += 15 * intensityVal; 
        g += 5 * intensityVal;
        b -= 15 * intensityVal;
        
        // Apply Subtle Desaturation
        const luma = 0.299 * r + 0.587 * g + 0.114 * b;
        const desat = 0.25 * intensityVal; // 25% desaturation
        
        r += (luma - r) * desat;
        g += (luma - g) * desat;
        b += (luma - b) * desat;
        
        // Clamp values between 0 and 255
        data[i]     = Math.min(255, Math.max(0, r));
        data[i+1]   = Math.min(255, Math.max(0, g));
        data[i+2]   = Math.min(255, Math.max(0, b));
    }
    
    // Put modified pixels back to the canvas
    ctx.putImageData(imgData, 0, 0);
    
    // 2. Apply a Golden-Hour Overlay (Overlay Blend Mode)
    ctx.globalCompositeOperation = 'overlay';
    ctx.fillStyle = `rgba(218, 165, 32, ${0.15 * intensityVal})`; // Goldenrod
    ctx.fillRect(0, 0, width, height);
    
    // 3. Apply a Vignette (Multiply Blend Mode)
    ctx.globalCompositeOperation = 'multiply';
    const radius = Math.sqrt(width * width + height * height) / 2;
    const gradient = ctx.createRadialGradient(
        width / 2, height / 2, radius * 0.4, // Inner circle
        width / 2, height / 2, radius        // Outer circle
    );
    
    gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
    gradient.addColorStop(1, `rgba(0, 0, 0, ${0.5 * intensityVal})`);
    
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, width, height);
    
    // Reset composite operation to default
    ctx.globalCompositeOperation = 'source-over';
    
    return canvas;
}