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
Continue reading on Dev.to
Opens in a new tab
![Join a list of strings with '[' as prefix, ']' as suffix, and ',' as delimiter using streams.](/_next/image?url=https%3A%2F%2Fmedia2.dev.to%2Fdynamic%2Fimage%2Fwidth%3D800%252Cheight%3D%252Cfit%3Dscale-down%252Cgravity%3Dauto%252Cformat%3Dauto%2Fhttps%253A%252F%252Fdev-to-uploads.s3.amazonaws.com%252Fuploads%252Farticles%252F9qcm43evuzjr784iwng7.png&w=1200&q=75)
