Image Linhof Technika Filter Effect Tool

function processImage(originalImg, contrastValue = 25, saturationAdjust = 0.1, coolTintAmount = 0.05, effectStrength = 0.7) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    if (width === 0 || height === 0) {
        console.error("Image dimensions are zero. Image might not be loaded or is invalid.");
        // Return a minimal canvas to avoid breaking downstream code if possible
        canvas.width = 1;
        canvas.height = 1;
        ctx.fillRect(0, 0, 1, 1); // Draw something to indicate it's not empty, but clearly an error placeholder
        return canvas;
    }

    canvas.width = width;
    canvas.height = height;
    ctx.drawImage(originalImg, 0, 0, width, height);

    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;
    
    // Keep a copy of the original pixel data from the canvas for the final strength blending.
    // This ensures that if originalImg was, for example, another canvas with prior modifications,
    // we're blending with the state of the image as it was drawn, before this filter.
    const originalCanvasPixelData = Uint8ClampedArray.from(data);

    for (let i = 0; i < data.length; i += 4) {
        // Get pixel values from the state drawn on canvas (which is a copy of originalImg)
        // These r, g, b variables will be modified through the processing pipeline.
        let r = originalCanvasPixelData[i];
        let g = originalCanvasPixelData[i + 1];
        let b = originalCanvasPixelData[i + 2];
        const alpha = originalCanvasPixelData[i + 3]; // Preserve alpha

        // 1. Contrast Adjustment
        // The contrastValue is expected to be in a range like -255 to 255.
        // Default is 25 for a moderate increase.
        if (contrastValue !== 0) {
            // Clamp contrastValue to a safe range to prevent division by zero or extreme factors.
            const clampedContrast = Math.max(-254, Math.min(254, contrastValue)); 
            const factor = (259 * (clampedContrast + 255)) / (255 * (259 - clampedContrast));
            r = factor * (r - 128) + 128;
            g = factor * (g - 128) + 128;
            b = factor * (b - 128) + 128;
        }

        // 2. Saturation Adjustment
        // saturationAdjust: -1 desaturates completely. 0 is no change. Positive values increase saturation.
        // Default is 0.1 for a 10% saturation boost.
        if (saturationAdjust !== 0) {
            const lum = 0.299 * r + 0.587 * g + 0.114 * b; // Calculate luminance
            // Ensure (1 + saturationAdjust) is non-negative.
            const satFactor = Math.max(0, 1 + saturationAdjust); 
            r = lum + (r - lum) * satFactor;
            g = lum + (g - lum) * satFactor;
            b = lum + (b - lum) * satFactor;
        }
        
        // 3. Cool Tint
        // coolTintAmount: 0 to 1. Higher values give a stronger cool (blueish) tint.
        // Default is 0.05 for a very subtle cool tint.
        if (coolTintAmount > 0) {
            const safeCoolTintAmount = Math.max(0, Math.min(1, coolTintAmount));
            r = r * (1 - 0.15 * safeCoolTintAmount);  // Reduce red
            // g = g * (1 - 0.05 * safeCoolTintAmount); // Optionally reduce green or keep neutral
            b = b * (1 + 0.15 * safeCoolTintAmount); // Boost blue
        }

        // Clamp all color components to the valid [0, 255] range.
        // This is done after all color modifications but before blending with original.
        r = Math.max(0, Math.min(255, r));
        g = Math.max(0, Math.min(255, g));
        b = Math.max(0, Math.min(255, b));

        // Store the fully processed R, G, B values for this pixel
        const processedR = r;
        const processedG = g;
        const processedB = b;

        // Apply overall effectStrength: Linearly interpolate (Lerp) between original pixel and processed pixel.
        // effectStrength: 0 means original image, 1 means fully processed image.
        // Default is 0.7 for a noticeable but not overpowering effect.
        const safeEffectStrength = Math.max(0, Math.min(1, effectStrength));
        data[i] = originalCanvasPixelData[i] * (1 - safeEffectStrength) + processedR * safeEffectStrength;
        data[i + 1] = originalCanvasPixelData[i + 1] * (1 - safeEffectStrength) + processedG * safeEffectStrength;
        data[i + 2] = originalCanvasPixelData[i + 2] * (1 - safeEffectStrength) + processedB * safeEffectStrength;
        data[i + 3] = alpha; // Keep original alpha
    }

    ctx.putImageData(imageData, 0, 0);
    return canvas;
}