Image Salt Flat Reflection Filter Effect Tool

function processImage(originalImg, reflectionHeightFactor = 0.5, reflectionOpacity = 0.6, fadeColor = 'white', saturation = 0.1, brightness = 1.2) {

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

    // Ensure numeric parameters are indeed numbers
    reflectionHeightFactor = Number(reflectionHeightFactor);
    reflectionOpacity = Number(reflectionOpacity);
    saturation = Number(saturation);
    brightness = Number(brightness);

    // Calculate dimensions
    const actualReflectionHeight = imgHeight * reflectionHeightFactor;
    const totalHeight = imgHeight + actualReflectionHeight;

    // Create main canvas
    const canvas = document.createElement('canvas');
    canvas.width = imgWidth;
    canvas.height = totalHeight;
    // For optimal performance with getImageData/putImageData, { willReadFrequently: true } can be added.
    // However, for a single application of the filter, its impact might be minimal.
    const ctx = canvas.getContext('2d' /*, {ällReadFrequently: true } */);

    // 1. Draw original image
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    // 2. Create and draw reflection if reflectionHeightFactor is positive
    if (reflectionHeightFactor > 0 && actualReflectionHeight > 0) {
        const reflectionYStart = imgHeight;

        // 2a. Fill the reflection area with the base fadeColor.
        // The reflection will appear to fade into this color.
        ctx.fillStyle = fadeColor;
        ctx.fillRect(0, reflectionYStart, imgWidth, actualReflectionHeight);

        // 2b. Create a temporary canvas to prepare the reflection image
        // This allows applying opacity gradients without affecting the main canvas directly yet.
        const tempReflectionCanvas = document.createElement('canvas');
        tempReflectionCanvas.width = imgWidth;
        tempReflectionCanvas.height = actualReflectionHeight;
        const tempRefCtx = tempReflectionCanvas.getContext('2d');

        // Draw the relevant part of the original image, flipped, onto the temporary canvas.
        // The "relevant part" is typically the top portion of the original image.
        tempRefCtx.save();
        tempRefCtx.translate(0, actualReflectionHeight); // Move origin to bottom-left for vertical flip
        tempRefCtx.scale(1, -1); // Flip vertically

        // Determine the height of the source image segment to use for reflection.
        // This is typically the same as actualReflectionHeight, but capped at original image's height.
        const sHeight = Math.min(imgHeight, actualReflectionHeight);
        
        tempRefCtx.drawImage(originalImg,
            0, 0, imgWidth, sHeight,        // Source rectangle (sx, sy, sWidth, sHeight) from originalImg
            0, 0, imgWidth, actualReflectionHeight // Destination rectangle (dx, dy, dWidth, dHeight) on tempRefCtx
        );
        tempRefCtx.restore();

        // Apply a vertical gradient mask to the reflection on the temporary canvas.
        // This makes the reflection fade from reflectionOpacity to transparent.
        tempRefCtx.globalCompositeOperation = 'destination-in'; // Apply gradient as an alpha mask
        const gradient = tempRefCtx.createLinearGradient(0, 0, 0, actualReflectionHeight);
        gradient.addColorStop(0, `rgba(0,0,0,${reflectionOpacity})`); // Reflection strongest at its top
        gradient.addColorStop(1, `rgba(0,0,0,0)`);                  // Fades to fully transparent at its bottom
        tempRefCtx.fillStyle = gradient;
        tempRefCtx.fillRect(0, 0, imgWidth, actualReflectionHeight);
        tempRefCtx.globalCompositeOperation = 'source-over'; // Reset composite operation

        // Draw the processed reflection (from tempReflectionCanvas) onto the main canvas.
        // This overlays the faded reflection onto the 'fadeColor' background.
        ctx.drawImage(tempReflectionCanvas, 0, reflectionYStart);
    }

    // 3. Apply "Salt Flat" filter (Desaturation and Brightness) to the entire canvas
    // Only perform pixel manipulation if saturation or brightness adjustments are needed.
    if (saturation !== 1 || brightness !== 1) {
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const data = imageData.data;

        for (let i = 0; i < data.length; i += 4) {
            let r = data[i];
            let g = data[i+1];
            let b = data[i+2];

            // Apply Desaturation
            // saturation = 0 results in grayscale, saturation = 1 results in original color.
            if (saturation !== 1) {
                const gray = 0.299 * r + 0.587 * g + 0.114 * b; // Standard luminance calculation
                r = gray + saturation * (r - gray);
                g = gray + saturation * (g - gray);
                b = gray + saturation * (b - gray);
            }

            // Apply Brightness
            // brightness = 1 results in no change.
            if (brightness !== 1) {
                r *= brightness;
                g *= brightness;
                b *= brightness;
            }

            // Clamp color values to the valid [0, 255] range
            data[i] = Math.max(0, Math.min(255, r));
            data[i+1] = Math.max(0, Math.min(255, g));
            data[i+2] = Math.max(0, Math.min(255, b));
        }
        ctx.putImageData(imageData, 0, 0);
    }

    return canvas;
}