How to Watermark Images in Your Browser — No Upload, No Software

async function addTextWatermark(imageFile, text, options = {}) {
  const {
    position = 'bottom-right',
    fontSize = 24,
    color = 'rgba(255, 255, 255, 0.7)',
    fontFamily = 'Arial',
    padding = 20,
  } = options;

  // Load original image
  const img = await loadImage(imageFile);

  const canvas = document.createElement('canvas');
  canvas.width = img.naturalWidth;
  canvas.height = img.naturalHeight;
  const ctx = canvas.getContext('2d');

  // Draw original image
  ctx.drawImage(img, 0, 0);

  // Configure text style
  ctx.font = `${fontSize}px ${fontFamily}`;
  ctx.fillStyle = color;
  ctx.textBaseline = 'bottom';

  // Add shadow for visibility on any background
  ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
  ctx.shadowBlur = 4;
  ctx.shadowOffsetX = 1;
  ctx.shadowOffsetY = 1;

  // Calculate position
  const textWidth = ctx.measureText(text).width;
  let x, y;

  switch (position) {
    case 'top-left':     x = padding; y = fontSize + padding; break;
    case 'top-right':    x = canvas.width - textWidth - padding; y = fontSize + padding; break;
    case 'bottom-left':  x = padding; y = canvas.height - padding; break;
    case 'bottom-right': x = canvas.width - textWidth - padding; y = canvas.height - padding; break;
    case 'center':       x = (canvas.width - textWidth) / 2; y = canvas.height / 2; break;
  }

  ctx.fillText(text, x, y);

  return canvas;
}

function loadImage(file) {
  return new Promise((resolve) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.src = URL.createObjectURL(file);
  });
}

async function addLogoWatermark(imageFile, logoFile, options = {}) {
  const {
    position = 'bottom-right',
    opacity = 0.7,
    scale = 0.15, // Logo width as fraction of image width
    padding = 20,
  } = options;

  const [img, logo] = await Promise.all([
    loadImage(imageFile),
    loadImage(logoFile),
  ]);

  const canvas = document.createElement('canvas');
  canvas.width = img.naturalWidth;
  canvas.height = img.naturalHeight;
  const ctx = canvas.getContext('2d');

  // Draw original image
  ctx.drawImage(img, 0, 0);

  // Calculate logo dimensions
  const logoWidth = canvas.width * scale;
  const logoHeight = (logo.naturalHeight / logo.naturalWidth) * logoWidth;

  // Calculate position
  let x, y;
  switch (position) {
    case 'bottom-right':
      x = canvas.width - logoWidth - padding;
      y = canvas.height - logoHeight - padding;
      break;
    case 'center':
      x = (canvas.width - logoWidth) / 2;
      y = (canvas.height - logoHeight) / 2;
      break;
    // ... other positions
  }

  // Apply opacity and draw logo
  ctx.globalAlpha = opacity;
  ctx.drawImage(logo, x, y, logoWidth, logoHeight);
  ctx.globalAlpha = 1.0;

  return canvas;
}

function addTiledWatermark(canvas, text, options = {}) {
  const {
    fontSize = 20,
    color = 'rgba(255, 255, 255, 0.3)',
    rotation = -30, // degrees
    spacing = 150,
  } = options;

  const ctx = canvas.getContext('2d');
  ctx.font = `${fontSize}px Arial`;
  ctx.fillStyle = color;

  const angleRad = (rotation * Math.PI) / 180;
  const textWidth = ctx.measureText(text).width;

  // Save context state
  ctx.save();

  // Rotate and tile
  for (let y = -canvas.height; y < canvas.height * 2; y += spacing) {
    for (let x = -canvas.width; x < canvas.width * 2; x += spacing + textWidth) {
      ctx.save();
      ctx.translate(x, y);
      ctx.rotate(angleRad);
      ctx.fillText(text, 0, 0);
      ctx.restore();
    }
  }

  ctx.restore();
}

async function batchWatermark(files, watermarkConfig) {
  const results = [];

  for (const file of files) {
    const canvas = await addTextWatermark(file, watermarkConfig.text, watermarkConfig);

    // Convert to blob
    const blob = await new Promise(resolve => {
      canvas.toBlob(resolve, 'image/jpeg', 0.92);
    });

    results.push({
      name: `watermarked_${file.name}`,
      blob,
      url: URL.createObjectURL(blob),
    });
  }

  return results;
}