I Built a Watermark Remover — Here’s What I Actually Learned

#ai #webdev #programming #productivity

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

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"
    );
  });
}

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:

The UI doesn't need a "configure the region" step — common case just works
The processing logic can be tuned around a known pattern
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?