Image Black Light Filter Effect Tool

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

  // Set canvas dimensions to the original image's natural dimensions
  canvas.width = originalImg.naturalWidth;
  canvas.height = originalImg.naturalHeight;

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

  // Get the ImageData object from the canvas. This contains the pixel data.
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data; // This is a Uint8ClampedArray: [R, G, B, A, R, G, B, A, ...]

  // Iterate over each pixel in the image data
  // Each pixel is 4 consecutive values in the array (R, G, B, A)
  for (let i = 0; i < data.length; i += 4) {
    const r = data[i];     // Red channel
    const g = data[i+1];   // Green channel
    const b = data[i+2];   // Blue channel
    // data[i+3] is the Alpha channel, which we'll leave unchanged

    // Apply a black light filter transformation.
    // This specific formula is chosen to simulate common characteristics:
    // - Reds tend to appear purplish or magenta.
    // - Greens are significantly darkened, as they typically don't fluoresce strongly unless specifically pigmented to do so.
    // - Blues are intensified, often shifting towards violet.
    // - Overall, there's a dominant blue/purple hue.
    // - A base level of blue light (the "+ 50" in newB) mimics the dim visible light from a black light bulb.

    let newR = r * 0.5 + b * 0.4;
    let newG = g * 0.2;
    let newB = b * 1.0 + r * 0.3 + 50;

    // Clamp the new RGB values to ensure they are within the valid 0-255 range
    data[i]   = Math.max(0, Math.min(255, newR));
    data[i+1] = Math.max(0, Math.min(255, newG));
    data[i+2] = Math.max(0, Math.min(255, newB));
  }

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

  // Return the canvas element with the applied effect
  return canvas;
}