Photo Foma Retropan 320 Film Filter Effect Tool

function processImage(originalImg, contrast = 1.2, grainAmount = 6, brightnessOffset = 0) {
  const canvas = document.createElement('canvas');
  // Using { willReadFrequently: true } can sometimes optimize performance for frequent getImageData/putImageData calls.
  const ctx = canvas.getContext('2d', { willReadFrequently: true });

  // Use naturalWidth/Height if available, otherwise fallback to width/height.
  // This handles cases where the img element might have CSS dimensions different from its actual content.
  const imgWidth = originalImg.naturalWidth || originalImg.width;
  const imgHeight = originalImg.naturalHeight || originalImg.height;

  // If image dimensions are invalid (e.g., image not loaded yet or is broken)
  if (imgWidth === 0 || imgHeight === 0) {
    console.error("Image has no dimensions or is not fully loaded.");
    // Return a tiny, empty canvas or handle error as appropriate for the application.
    // For this utility, we'll create a 1x1 canvas to prevent further errors.
    canvas.width = 1;
    canvas.height = 1;
    return canvas;
  }

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

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

  let imageData;
  try {
    // Get the pixel data from the canvas
    imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  } catch (e) {
    // This can happen due to cross-origin restrictions if the image is from another domain
    // and the canvas becomes "tainted".
    console.error("Could not get image data, possibly due to cross-origin restrictions:", e);
    // Return the canvas with the original image drawn, as filtering is not possible.
    return canvas;
  }
  
  const data = imageData.data; // This is a Uint8ClampedArray

  // Iterate over each pixel (each pixel consists of 4 values: R, G, B, A)
  for (let i = 0; i < data.length; i += 4) {
    const r = data[i];
    const g = data[i + 1];
    const b = data[i + 2];
    // The alpha channel (data[i+3]) is preserved.

    // 1. Convert to grayscale using the luminosity method (approximates human perception of brightness)
    let gray = 0.299 * r + 0.587 * g + 0.114 * b;

    // 2. Apply contrast adjustment
    // The formula shifts values away from or towards the midpoint (128)
    // new_value = factor * (old_value - 128) + 128
    gray = contrast * (gray - 128) + 128;
    
    // 3. Apply brightness offset
    // This simply adds or subtracts a value to/from the pixel's brightness
    gray += brightnessOffset;

    // Clamp the gray value to the valid 0-255 range after contrast and brightness
    gray = Math.max(0, Math.min(255, gray));

    // 4. Add film grain
    if (grainAmount > 0) {
      // Generate a random noise value between -grainAmount and +grainAmount
      const noise = (Math.random() - 0.5) * grainAmount * 2;
      gray += noise;
      // Clamp the value again after adding noise
      gray = Math.max(0, Math.min(255, gray));
    }

    // Set the R, G, B channels to the new grayscale value
    data[i] = gray;
    data[i + 1] = gray;
    data[i + 2] = gray;
  }

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

  return canvas;
}