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

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