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

Dan Dan — Sat, 04 Apr 2026 14:36:58 +0000

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:

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

### For Manual Eraser

The user paints over the watermark with a brush:

Sample pixels around each stroke point
Apply blur/average to blend with surroundings
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

DEV Community: Dan Dan

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

The Problem