A simple yet powerful web application for bulk image watermarking with text or image overlays, live preview, and ZIP download functionality.

• 🎨 Drag & Drop Upload - Easy file upload with visual feedback
• 📝 Text Watermarks - Customizable text with font size, color, and opacity
• 🖼️ Image Watermarks - Upload PNG logos with transparency support
• 🎯 9 Position Presets - Quick positioning with visual grid
• 🖱️ Drag to Reposition - Fine-tune watermark placement on canvas
• 👁️ Live Preview - Real-time canvas preview of watermark
• 📦 Bulk Processing - Handle up to 100 images at once
• 💾 ZIP Download - Download all watermarked images as a single ZIP file
• ✨ Premium UI - Modern design with glassmorphism and smooth animations

• Input: JPG, PNG, WebP
• Output: Same as input format
• Max Files: 100 per batch
• Max File Size: 50MB per file

1. Clone or navigate to the project directory:

   cd /Users/kunal/.gemini/antigravity/scratch/image-watermark-app

2. Install dependencies:

   npm install

3. Start the server:

   npm start

4. Open your browser:

   http://localhost:3000
   

1. Upload images by dragging them into the drop zone or clicking to browse
2. Ensure "Text" mode is selected (default)
3. Enter your watermark text
4. Customize font size, color, and opacity using the sliders
5. Select a position from the 9-position grid or drag on the canvas preview
6. Click "Process Images"
7. Download the ZIP file containing all watermarked images

1. Upload images to watermark
2. Switch to "Image" mode
3. Upload a PNG watermark image (transparency supported)
4. Select position using the grid or drag on canvas
5. Click "Process Images"
6. Download the ZIP file

• The live preview canvas allows you to drag the watermark to any position
• Simply click and drag on the canvas to reposition
• The custom position will be applied to all images during processing

Upload multiple image files.

Request: multipart/form-data with images field (max 100 files)

Response:

{
  "success": true,
  "count": 10,
  "files": [...]
}

Process images with watermark configuration.

Request:

{
  "watermarkType": "text|image",
  "text": "© Your Brand",
  "fontSize": 40,
  "color": "#ffffff",
  "opacity": 80,
  "position": "bottom-right",
  "imageWatermark": "data:image/png;base64,..."
}

Response:

{
  "success": true,
  "zipId": "uuid",
  "downloadUrl": "/download/uuid"
}

Download the ZIP file containing watermarked images.

Response: ZIP file download

• Express.js - Web server
• Multer - File upload handling
• Sharp - Image processing and watermarking
• Archiver - ZIP file creation
• UUID - Unique file naming

• HTML5 - Semantic structure
• CSS3 - Modern styling with glassmorphism
• Vanilla JavaScript - Canvas API and DOM manipulation
• Canvas API - Image preview and watermark rendering

image-watermark-app/
├── public/
│   ├── index.html      # Main HTML page
│   ├── styles.css      # Premium CSS design
│   └── app.js          # Client-side JavaScript
├── uploads/            # Temporary uploaded files (auto-created)
├── temp/               # Temporary ZIP files (auto-created)
├── server.js           # Express server
├── package.json        # Dependencies
└── README.md           # This file

• Glassmorphism - Modern frosted glass effects
• Gradient Text - Vibrant gradient headings
• Smooth Animations - Micro-interactions and transitions
• Responsive Layout - Works on desktop and mobile
• Dark Theme - Easy on the eyes with vibrant accents

• Invalid file types are rejected
• Maximum file limits are enforced
• Automatic cleanup of temporary files
• User-friendly error messages

• No database (stateless)
• No user authentication
• Local storage only
• Single server instance
• Temporary files cleaned on server restart

• Custom font selection
• Advanced text styling (shadow, outline)
• Batch position configurations
• Watermark templates
• Cloud storage integration

MIT License - feel free to use this project for personal or commercial purposes.

Created with ❤️ using Node.js and Express

Note: Remember to set this directory as your active workspace for the best development experience!