DEV Community

Dan Dan
Dan Dan

Posted on

How I built a browser-based AI watermark remover with Next.js and Canvas API

#webdev #opensource #javascript #nextjs

The Problem

AI tools like Gemini and Doubao add watermarks to generated images. Removing them usually requires
desktop software or paid services. I wanted something instant, free, and private.

## The Solution

CleanMark — 4 tools, all running client-side in the browser.

  • Gemini Watermark Remover (auto-detect & remove)
  • Doubao Watermark Remover (auto-detect & remove)
  • Manual Eraser (brush tool for any custom watermark)
  • Logo Overlay (cover watermarks with your own brand)

## Tech Stack

  • Next.js 16 App Router
  • Canvas API for image processing
  • next-intl for i18n (EN/ZH)

## How the Watermark Removal Works

The core idea is Canvas-based inpainting — analyze pixels around the watermark and fill with
surrounding colors.

### For Gemini & Doubao (Automatic)

These AI tools embed watermarks at fixed, predictable positions. So we:

  1. Load the image onto an HTML canvas
  2. Identify the watermark region (known coordinates/pattern)
  3. Sample neighboring pixels outside the watermark area
  4. Fill the region using a weighted average of surrounding pixels

### For Manual Eraser

The user paints over the watermark with a brush:

  1. Sample pixels around each stroke point
  2. Apply blur/average to blend with surroundings
  3. Result looks natural because it inherits local texture

### Why Client-Side?

All processing uses the native browser Canvas API — no server needed. The image never leaves the
device, zero privacy risk, instant results.

## Try it

https://cleanmark.org

https://github.com/sunzhenyu/CleanMark

Top comments (0)