M6 Image Tool

/**
 * Applies an "M6" style vintage/warm filter (similar to the popular M6 preset)
 * characterized by faded blacks, warm tones, and slightly muted saturation.
 * 
 * @param {HTMLImageElement} originalImg - The original image object.
 * @param {string|number} intensity - The intensity of the filter from 0.0 to 1.0 (default "1.0").
 * @returns {HTMLCanvasElement} - The canvas with the processed image.
 */
function processImage(originalImg, intensity = "1.0") {
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);
    
    // Retrieve image data for pixel manipulation
    const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imgData.data;
    
    // Ensure intensity is parsed as a valid float, clamped between 0 and 1
    let filterIntensity = parseFloat(intensity);
    if (isNaN(filterIntensity)) filterIntensity = 1.0;
    filterIntensity = Math.max(0, Math.min(1, filterIntensity));

    const desatFactor = 0.25; // 25% desaturation
    const fadeLift = 35;      // Lift blacks by 35/255
    const highlightDrop = 20; // Drop highlights (max becomes 235)
    
    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];
        
        // 1. Desaturation (M-series filters often have a muted look)
        const luma = 0.299 * r + 0.587 * g + 0.114 * b;
        let nr = r + (luma - r) * desatFactor;
        let ng = g + (luma - g) * desatFactor;
        let nb = b + (luma - b) * desatFactor;
        
        // 2. Add Warmth (emphasizes amber/brown tones)
        // Boost red slightly, keep green steady, reduce blue to add warmth
        nr = nr * 1.08 + 5;
        ng = ng * 1.02;
        nb = nb * 0.90 - 5;
        
        // 3. Faded / Vintage look (Lift shadows, drop highlights)
        nr = nr * (255 - fadeLift - highlightDrop) / 255 + fadeLift;
        ng = ng * (255 - fadeLift - highlightDrop) / 255 + fadeLift;
        nb = nb * (255 - fadeLift - highlightDrop) / 255 + fadeLift;
        
        // 4. Apply intensity blending and assign back
        // Uint8ClampedArray handles the 0-255 clamping automatically
        data[i]     = r + (nr - r) * filterIntensity;
        data[i + 1] = g + (ng - g) * filterIntensity;
        data[i + 2] = b + (nb - b) * filterIntensity;
        // data[i+3] (alpha) remains unchanged
    }
    
    ctx.putImageData(imgData, 0, 0);
    return canvas;
}