Image Fujifilm Instax Filter Effect Creator

function processImage(originalImg) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure using the intrinsic dimensions of the image
    // HTMLImageElement.naturalWidth/Height provide the original image dimensions
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // Fujifilm Instax films typically exhibit several characteristics:
    // 1. Brightness: Often slightly increased, sometimes with highlights appearing "blown out".
    // 2. Contrast: Good, punchy contrast is a hallmark.
    // 3. Saturation: Colors are present but can be slightly muted or have a specific filmic quality.
    // 4. Color Cast: A subtle, characteristic color cast is common, frequently warm (yellowish, peachy, or pinkish),
    //    though some films or conditions can yield cooler tones.

    // Step 1: Apply base adjustments using CSS-like filters on the canvas context.
    // These values aim for a common classic Instax look.
    const brightnessValue = 1.1; // 110% - slight overall brightening
    const contrastValue = 1.3;   // 130% - for that punchy Instax look
    const saturationValue = 0.85; // 85% - slightly desaturate for a filmic feel

    ctx.filter = `brightness(${brightnessValue}) contrast(${contrastValue}) saturate(${saturationValue})`;

    // Draw the original image onto the canvas. The filter will be applied during this step.
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    // Step 2: Apply a color tint using a blend mode to mimic the film's color cast.
    // Reset the filter property so it doesn't affect upcoming fillRect operation.
    ctx.filter = 'none';

    // The 'soft-light' blend mode is chosen. It applies the tint more subtly
    // than 'overlay', especially preserving highlights and shadows while tinting midtones.
    // This helps achieve a more natural-looking film cast.
    ctx.globalCompositeOperation = 'soft-light';

    // Define the tint color. A light, warm peachy-yellow is used here.
    // The alpha value controls the intensity of the tint.
    const tintColor = 'rgba(255, 225, 195, 0.2)'; // Light peachy-yellow with 20% opacity

    ctx.fillStyle = tintColor;
    ctx.fillRect(0, 0, imgWidth, imgHeight);

    // Step 3: Reset globalCompositeOperation to its default value.
    // This is good practice to avoid unintended effects on subsequent drawing operations if any.
    ctx.globalCompositeOperation = 'source-over';

    return canvas;
}