惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

B
Blog RSS Feed
量子位
Recent Announcements
Recent Announcements
T
The Blog of Author Tim Ferriss
美团技术团队
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Blog — PlanetScale
Blog — PlanetScale
H
Help Net Security
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
博客园 - Franky
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
宝玉的分享
宝玉的分享
大猫的无限游戏
大猫的无限游戏
V
Visual Studio Blog
博客园 - 聂微东
aimingoo的专栏
aimingoo的专栏
Microsoft Security Blog
Microsoft Security Blog
U
Unit 42
J
Java Code Geeks
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
IT之家
IT之家
Hugging Face - Blog
Hugging Face - Blog
腾讯CDC
L
LangChain Blog

DEV Community

Authentication Security Deep Dive: From Brute Force to Salted Hashing (With Java Examples) Why AI Systems Don’t Fail — They Drift Spilling beans for how i learn for exam😁"Reinforcement Learning Cheat Sheet" I Replaced Chrome with Safari for AI Browser Automation. Here's What Broke (and What Finally Worked) How Python Borrows Other People's Work The $40 Architecture: Processing 1 Billion API Requests with 99.99% Uptime Vibe Coding: A Workflow Guide (From Zero to SaaS) Most webhook security guides protect the wrong side. The scary part is delivery. Headless CMS for TanStack Start: Build a Blog with Cosmic EU Age Verification App "Hacked in 2 Minutes" — What Actually Happened Comfy Cloud’s delete function does not actually remove files Running AI Models on GPU Cloud Servers: A Beginner Guide Event-driven media intelligence with AWS Step Functions and Bedrock I scored 500 AI prompts across 8 quality dimensions — here's what broke How to Call Google Gemini API from Next.js (Free Tier, No Backend Needed) The Portal Protocol: Reclaiming Human Connection in the Age of AI How to Fix Your Team's Scattered Knowledge Problem With a Self-Hosted Forum Intro to tc Cloud Functors: A Graph-First Mental Model for the Modern Cloud Designing Multi-Tenant Backends With Both Ownership and Team Access I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned PostgreSQL Performance Optimization: Why Connection Pooling Is Critical at Scale Cómo construí un SaaS multi-rubro para gestionar expensas en Argentina con FastAPI + Vue 3 🚀 I Built an Ethical Hacking Scanner Tool – Open Source Project I Replaced /usage and /context in Claude Code With a Single Statusline A Pythonic Way to Handle Emails (IMAP/SMTP) with Auto-Discovery and AI-Ready Design I Collected 8.9 Million Polymarket Price Points — Here's What I Found About How Markets Really Move EcoTrack AI — Carbon Footprint Tracker & Dashboard Everyone's Using AI. No One Agrees How. 5 self-hosted ebook managers worth trying in 2026 Building Your First AI Agent with LangChain: From Chatbot to Autonomous Assistant
I Built a Watermark Remover — Here’s What I Actually Learned
Eric Cheung · 2026-04-29 · via DEV Community

I'd generate an image with Gemini, like it, want to drop it into a draft or mockup — and there was the visible watermark sitting right on top of the export. Not a huge deal, but annoying enough that I'd break flow every time. Opening Photoshop or GIMP for one overlay felt absurd. Cropping usually ruined the composition.

So I spent a weekend building something for exactly that: Gemini Watermark Remover — upload an image, remove the visible mark in-browser, download a clean PNG.

This is the story of how I built it and what I got wrong before I got it right.


The first decision: do one thing

I started with a constraint: no editor, no layers, no timeline, no format conversion, no "enhance" button. Just this:

Upload → Remove the mark → Download a clean PNG.

That's it. Every time I felt the urge to add something — batch mode, adjustment sliders, export options — I came back to that constraint and cut it.

The constraint wasn't laziness. It was a product decision. Tools that do everything require users to think. Tools that do one thing let users just get on with their work.


Why the browser, and why it actually mattered

The core processing runs in the browser. No server upload, no queue, no storage policy. The image never leaves the tab.

For a photo editor this might be a trade-off. For a small utility like this, it's the right default. People use it for drafts, client concepts, internal assets — images that probably shouldn't hit a random server in the first place.

The pipeline is straightforward:

File input → Image decode → Canvas render → Mark detection / region processing → Preview → PNG export

Enter fullscreen mode Exit fullscreen mode

The implementation is mostly standard Canvas API:

async function loadImageFromFile(file: File): Promise<ImageBitmap> {
  if (!file.type.startsWith("image/")) {
    throw new Error("Please upload a valid image file.");
  }
  return createImageBitmap(file);
}

function drawToCanvas(bitmap: ImageBitmap): HTMLCanvasElement {
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d")!;
  canvas.width = bitmap.width;
  canvas.height = bitmap.height;
  ctx.drawImage(bitmap, 0, 0);
  return canvas;
}

function exportAsPng(canvas: HTMLCanvasElement): Promise<Blob> {
  return new Promise((resolve, reject) => {
    canvas.toBlob(
      (blob) => (blob ? resolve(blob) : reject(new Error("Export failed."))),
      "image/png"
    );
  });
}

Enter fullscreen mode Exit fullscreen mode

Nothing glamorous. But getting upload → preview → export to feel seamless is the actual product. A clever removal algorithm doesn't help much if the UI is janky.


The hard part isn't removing the mark

Removing a visible overlay sounds simple. Detect the region, patch it. Done.

The problem is what the mark is sitting on top of.

Watermarks land on gradients, skin tones, compressed JPEG noise, AI-generated texture, dark backgrounds with subtle detail. If the patch looks blurry or slightly wrong, users notice immediately — even if they can't articulate why.

The real goal isn't "remove the mark." It's:

Make the processed area look like nothing happened.

That sounds obvious, but it pushes against a common temptation: over-processing. A lot of image tools try to "fix" things they weren't asked to fix — smooth skin, sharpen edges, boost contrast. I specifically didn't want that. The best result for this workflow is boring. The image should look untouched except for the mark being gone.


Scope as a feature

The first version only targets the visible Gemini overlay. Not every watermark on the internet, not arbitrary logos, not text burns.

That focus does three things:

  1. The UI doesn't need a "configure the region" step — common case just works
  2. The processing logic can be tuned around a known pattern
  3. Users with the specific problem immediately understand what the tool is

One of the more useful mental shifts I've had with small tools: narrow products are easier to trust. If a tool claims to do everything, I'm skeptical. If it claims to do one thing and does it well, I'll actually use it.


A note on what this tool doesn't do

Google's Gemini images also carry SynthID — an invisible, embedded watermark for AI provenance tracking. This tool doesn't touch that. It's about the visible overlay in your export, not invisible cryptographic signatures baked into the pixel data.

Worth being explicit: this is for images you own, generated, or have permission to edit. Not for stripping attribution or bypassing content transparency systems.


The browser-first model and what it means for the business

Running in the browser keeps infrastructure costs low, which matters a lot for an indie project. No per-image compute, no storage costs, no deletion policy to maintain.

It also clarifies where paid features make sense: batch processing, higher-volume workflows, and any future server-side features can live in a paid tier. The free tool can stay fast and simple without subsidizing heavy usage.

That's a cleaner model than gating the core utility behind an account from day one.


What I'd do differently

The things I want to improve are mostly at the edges:

  • Better handling of images with complex backgrounds where the mark overlaps important detail
  • Mobile UX — Canvas processing on mobile can be slow and I haven't optimized it properly yet
  • A before/after slider that's actually good (the current one is functional, not great)
  • Some kind of quality indicator so the user knows when a result is uncertain

The core promise stays the same: upload, clean, download, move on.


The actual takeaways

Three things I'd say to anyone building something like this:

Constraints are productive. Deciding not to build something is a real engineering decision. It's usually the right one on v1.

"Runs in your browser" is a feature, not a footnote. Privacy-by-default is something users care about, and it's worth building around intentionally.

The pipeline matters as much as the algorithm. A tool can have a solid core and still feel terrible if the upload, preview, and export experience is rough. Get those right first.


You can try it at geminiwatermarkremover.ai.

Happy to hear from other developers building small AI workflow tools — what problems are you solving, and what trade-offs did you end up making?