Image Rollei RPX 25 Film Filter Effect Tool

function processImage(originalImg, contrast = 1.6, grainStrength = 5) {
    const canvas = document.createElement('canvas');
    // Ensure we use the natural dimensions of the image, not scaled dimensions
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;

    const ctx = canvas.getContext('2d');
    if (!ctx) {
        console.error("Could not get 2D rendering context for canvas.");
        return canvas; // Return an empty canvas or handle error as appropriate
    }

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // Get the ImageData object to manipulate pixels
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data; // This is a Uint8ClampedArray

    // Rollei RPX 25 characteristics:
    // - Black & White: Convert to grayscale.
    // - High Contrast: Adjust contrast.
    // - Very Fine Grain: Add subtle noise.

    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];
        // Alpha (data[i+3]) is preserved

        // 1. Convert to Grayscale (Luminosity method)
        // Standard coefficients: 0.299 R + 0.587 G + 0.114 B
        let gray = 0.299 * r + 0.587 * g + 0.114 * b;

        // 2. Adjust Contrast
        // Formula: NewValue = ((OldValue/255 - 0.5) * contrastFactor + 0.5) * 255
        // This formula pivots around mid-gray (127.5)
        if (contrast !== 1.0) { // No need to apply if contrast is neutral
            gray = ((gray / 255.0 - 0.5) * contrast + 0.5) * 255.0;
        }
        
        // Clamp the gray value after contrast adjustment
        gray = Math.max(0, Math.min(255, gray));

        // 3. Add Film Grain
        // RPX 25 has very fine grain, so strength should be low.
        if (grainStrength > 0) {
            // Generate a random offset between -grainStrength and +grainStrength
            const grainOffset = (Math.random() - 0.5) * grainStrength * 2;
            gray += grainOffset;
            
            // Clamp the gray value again after adding grain
            gray = Math.max(0, Math.min(255, gray));
        }
        
        // Set the new RGB values (all to gray for B&W)
        data[i] = gray;     // Red
        data[i + 1] = gray; // Green
        data[i + 2] = gray; // Blue
    }

    // Put the modified image data back onto the canvas
    ctx.putImageData(imageData, 0, 0);

    return canvas;
}