Image Breakthrough Photography X4 ND Filter Effect

function processImage(originalImg, filterFactor = 4) {
  let factor = filterFactor;

  // Ensure factor is a number.
  // If a string is passed, try to parse it as a float.
  if (typeof factor === 'string') {
    factor = parseFloat(factor);
  }

  // Validate the factor.
  // If parsing failed (NaN) or the factor is zero or negative,
  // it's not a valid ND filter factor. In this case, we revert to a
  // sensible default, interpreting "X4" in the tool name as a factor of 4 (ND4).
  if (isNaN(factor) || factor <= 0) {
    factor = 4; // Default factor for "X4" interpretation.
  }

  // An ND (Neutral Density) filter is designed to reduce light intensity.
  // A factor of 1 means no reduction (like a clear filter, 0 stops).
  // A factor less than 1 would imply light amplification, which is not an ND effect.
  // Therefore, we clamp the factor to be at least 1.
  if (factor < 1) {
    factor = 1;
  }

  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  // Get the original image dimensions.
  // naturalWidth/naturalHeight are suitable for <img> elements.
  const imgWidth = originalImg.naturalWidth;
  const imgHeight = originalImg.naturalHeight;

  // If the image has no dimensions (e.g., not loaded or invalid image),
  // set canvas to 0x0 and return.
  if (imgWidth === 0 || imgHeight === 0) {
    canvas.width = 0;
    canvas.height = 0;
    return canvas;
  }

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

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

  // If the factor is 1, no pixel changes are needed (0-stop filter effect).
  // Return the canvas with the original image drawn on it.
  if (factor === 1) {
    return canvas;
  }

  // Get the pixel data from the canvas.
  const imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
  const data = imageData.data; // This is a Uint8ClampedArray.

  // Calculate the light multiplier.
  // For example, a factor of 4 (like an ND4 filter, 2 stops) means
  // light intensity is reduced to 1/4 (0.25) of the original.
  const multiplier = 1 / factor;

  // Iterate over each pixel in the image data.
  // Each pixel consists of 4 components: Red, Green, Blue, Alpha.
  for (let i = 0; i < data.length; i += 4) {
    // Apply the multiplier to the R, G, B components.
    // The Uint8ClampedArray will automatically clamp values to the 0-255 range
    // and round to the nearest integer.
    data[i] = data[i] * multiplier;       // Red component
    data[i + 1] = data[i + 1] * multiplier; // Green component
    data[i + 2] = data[i + 2] * multiplier; // Blue component
    // The Alpha channel (data[i + 3]) is typically left unchanged for an ND filter effect.
  }

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

  // Return the canvas with the ND filter effect applied.
  return canvas;
}