Gemini 无损去水印神器：基于数学算法的纯前端解决方案

优质文章学习记录

— 9 min read
Gemini 无损去水印神器：基于数学算法的纯前端解决方案

🎯 Gemini 无损去水印神器：基于数学算法的纯前端解决方案

🔗 项目地址：gemini-watermark-remover
🌐 在线体验：banana.ovo.re
⭐ 如果觉得有用，请给项目点个 Star！

📖 引言

随着 Google Gemini AI 图像生成功能的普及，越来越多的用户开始使用它来创作各种精美的图片。然而，Gemini 生成的图片右下角都会带有一个半透明的水印 Logo，这在某些场景下可能会影响图片的使用效果。

今天给大家推荐一个开源项目 gemini-watermark-remover，它能够完美无损地移除 Gemini 图片上的可见水印，而且完全在浏览器端运行，无需上传图片到服务器，充分保护用户隐私！

✨ 核心特性

🔒 100% 客户端处理，隐私至上

  • 无需后端服务器：所有图片处理都在浏览器本地完成
  • 零数据上传：图片永远不会离开你的设备
  • 即开即用：打开网页即可使用，无需注册登录

🎯 数学精确，非 AI 模型

  • 基于反向 Alpha 混合算法（Reverse Alpha Blending）
  • 不依赖 AI 模型的"幻觉"式修复
  • 数学公式保证结果的像素级精确
  • 真正的"无损"去水印

🚀 智能检测，自动适配

  • 自动识别 48×48 或 96×96 两种水印尺寸
  • 根据图片尺寸智能选择处理策略
  • 支持各种分辨率的 Gemini 生成图片

🎨 简洁易用，体验流畅

  • 拖拽上传或点击选择
  • 实时处理，秒级完成
  • 一键下载处理后的图片
  • 支持多语言界面（中文/英文）

🌐 跨平台兼容

  • ✅ Chrome 90+
  • ✅ Firefox 88+
  • ✅ Safari 14+
  • ✅ Edge 90+

🔬 技术原理深度解析

Gemini 的水印添加方式

Gemini 使用标准的 Alpha 混合（Alpha Compositing）技术来添加水印：

watermarked = α × logo + (1 - α) × original

其中：

  • watermarked：带水印的像素值
  • α：Alpha 通道值（0.0-1.0，控制透明度）
  • logo：水印 Logo 的颜色值（白色 = 255）
  • original：原始像素值（我们要恢复的目标）

反向求解算法

既然知道了 Gemini 添加水印的公式，我们就可以通过数学逆运算来恢复原始图像：

original = (watermarked - α × logo) / (1 - α)

关键步骤：

  1. 捕获 Alpha 通道：在纯色背景上提取水印，重建 Alpha 映射表
  2. 应用逆公式：对每个像素应用反向混合公式
  3. 边界处理：限制 Alpha 值范围，避免除零错误
  4. 像素裁剪：确保结果在 [0, 255] 范围内

水印检测规则

项目实现了智能的水印检测机制：

图像尺寸条件水印尺寸右边距下边距
宽 > 1024 且 高 > 102496×9664px64px
其他情况48×4832px32px

💻 核心代码实现

1. Alpha Map 计算

/** * 从背景捕获图像计算 Alpha 通道 */exportfunctioncalculateAlphaMap(bgCaptureImageData){const{ width, height, data }= bgCaptureImageData;const alphaMap =newFloat32Array(width * height);// 对每个像素，取 RGB 三通道最大值并归一化到 [0, 1]for(let i =0; i < alphaMap.length; i++){const idx = i *4;// RGBA 格式，每像素 4 字节const r = data[idx];const g = data[idx +1];const b = data[idx +2];// 取三通道最大值作为亮度值const maxChannel = Math.max(r, g, b);// 归一化到 [0, 1] 范围 alphaMap[i]= maxChannel /255.0;}return alphaMap;}

2. 反向 Alpha 混合

/** * 使用反向 Alpha 混合移除水印 */exportfunctionremoveWatermark(imageData, alphaMap, position){const{ x, y, width, height }= position;constALPHA_THRESHOLD=0.002;// 忽略极小 alpha 值（噪声）constMAX_ALPHA=0.99;// 避免除以接近零的值constLOGO_VALUE=255;// 白色水印的颜色值// 处理水印区域的每个像素for(let row =0; row < height; row++){for(let col =0; col < width; col++){// 计算在原图中的索引const imgIdx =((y + row)* imageData.width +(x + col))*4;const alphaIdx = row * width + col;let alpha = alphaMap[alphaIdx];// 跳过极小 alpha 值if(alpha <ALPHA_THRESHOLD)continue;// 限制 alpha 值避免除零 alpha = Math.min(alpha,MAX_ALPHA);const oneMinusAlpha =1.0- alpha;// 对每个 RGB 通道应用反向混合for(let c =0; c <3; c++){const watermarked = imageData.data[imgIdx + c];// 反向 alpha 混合公式const original =(watermarked - alpha *LOGO_VALUE)/ oneMinusAlpha;// 裁剪到 [0, 255] 范围 imageData.data[imgIdx + c]= Math.max(0, Math.min(255, Math.round(original)));}}}}

3. 主引擎协调

/** * 水印引擎类 - 协调整个处理流程 */exportclassWatermarkEngine{asyncremoveWatermarkFromImage(image){// 1. 创建 Canvas 处理图像const canvas = document.createElement('canvas'); canvas.width = image.width; canvas.height = image.height;const ctx = canvas.getContext('2d'); ctx.drawImage(image,0,0);// 2. 获取图像数据const imageData = ctx.getImageData(0,0, canvas.width, canvas.height);// 3. 检测水印配置const config =detectWatermarkConfig(canvas.width, canvas.height);const position =calculateWatermarkPosition(canvas.width, canvas.height, config);// 4. 获取对应尺寸的 alpha mapconst alphaMap =awaitthis.getAlphaMap(config.logoSize);// 5. 移除水印removeWatermark(imageData, alphaMap, position);// 6. 写回 Canvas ctx.putImageData(imageData,0,0);return canvas;}}

🎬 效果展示

无损对比图

下图展示了原图与去水印后的像素级差异对比，可以看到除了水印区域外，其他部分完全一致：

无损 diff 示例

实际案例

原图（带水印）处理后（无水印）
示例1
在这里插入图片描述		处理后1
在这里插入图片描述

🚀 使用方法

方式一：在线网站（推荐）

  1. 打开 banana.ovo.re
  2. 拖拽或点击选择带水印的 Gemini 图片
  3. 等待自动处理（通常只需 1-2 秒）
  4. 点击下载按钮保存处理后的图片

方式二：油猴脚本（进阶）

如果你经常使用 Gemini，可以安装油猴脚本实现自动去水印：

  1. 安装 Tampermonkey 或 Greasemonkey
  2. 打开脚本地址：gemini-watermark-remover.user.js
  3. 点击安装
  4. 在 Gemini 对话页面，点击"复制图片"或"下载图片"时会自动去除水印

方式三：本地部署

# 克隆项目git clone https://github.com/journey-ad/gemini-watermark-remover.git cd gemini-watermark-remover # 安装依赖pnpminstall# 开发模式pnpm dev # 生产构建pnpm build # 本地预览pnpm serve

📁 项目结构

gemini-watermark-remover/ ├── public/ │ ├── index.html # 主页面 │ └── terms.html # 使用条款 ├── src/ │ ├── core/ # 核心算法模块 │ │ ├── alphaMap.js # Alpha 通道计算 │ │ ├── blendModes.js # 反向混合算法 │ │ └── watermarkEngine.js # 主引擎协调器 │ ├── assets/ # 预捕获的水印资源 │ │ ├── bg_48.png # 48×48 水印 Alpha 图 │ │ └── bg_96.png # 96×96 水印 Alpha 图 │ ├── i18n/ # 国际化语言文件 │ ├── userscript/ # 油猴脚本 │ ├── app.js # 网站应用入口 │ └── i18n.js # 国际化工具 ├── docs/ # 示例图片 ├── dist/ # 构建输出 └── build.js # 构建脚本

🎓 技术亮点总结

1. 数学严谨性

  • 基于标准的 Alpha 混合公式
  • 通过逆运算精确恢复原始像素
  • 避免了 AI 模型的不确定性

2. 性能优化

  • 使用 Float32Array 和 Uint8ClampedArray 提升计算效率
  • Alpha Map 缓存机制减少重复计算
  • Canvas API 硬件加速

3. 边界处理

  • ALPHA_THRESHOLD：过滤噪声
  • MAX_ALPHA：避免除零错误
  • 像素值裁剪：确保结果合法

4. 工程化实践

  • ES6 模块化设计
  • 清晰的代码注释
  • 完善的错误处理
  • 国际化支持

⚠️ 重要说明

局限性

  1. 仅移除可见水印：只能去除右下角的半透明 Logo
  2. 无法处理隐形水印：不能去除 SynthID 等隐写水印
  3. 版本依赖：针对 Gemini 当前（2025年）的水印模式设计

免责声明

⚠️ 本工具仅供个人学习研究使用

移除水印可能涉及法律问题，请确保你的使用行为符合：当地法律法规Gemini 服务条款知识产权相关规定

作者不鼓励将本工具用于侵权、虚假陈述或其他非法用途。

本软件按"原样"提供，不提供任何形式的保证。

🌟 为什么推荐这个项目？

1. 技术价值

  • 展示了如何用纯数学方法解决实际问题
  • 代码简洁优雅，适合学习 Canvas API 和图像处理
  • 完整的工程化实践案例

2. 实用价值

  • 真正解决了 Gemini 用户的痛点
  • 完全免费开源
  • 隐私保护做得很好

3. 学习价值

  • 理解 Alpha 混合原理
  • 学习浏览器端图像处理
  • 掌握 TypedArray 的使用

🔗 相关资源

🎉 总结

gemini-watermark-remover 是一个技术上严谨、实用性强、隐私保护到位的开源项目。它用优雅的数学方法解决了 Gemini 图片水印问题，代码质量高，值得学习和使用。

如果你：

  • 经常使用 Gemini 生成图片
  • 对图像处理算法感兴趣
  • 想学习浏览器端的高性能计算
  • 关注用户隐私保护

那么这个项目绝对值得你关注！

别忘了给项目点个 ⭐ Star，支持开源！

📮 互动交流

欢迎在评论区分享：

  • 你使用这个工具的体验
  • 对算法原理的理解和疑问
  • 其他有趣的图像处理技巧

让我们一起学习进步！💪

Read more

【Actix Web】Rust Web开发实战：Actix Web框架全面指南

【Actix Web】Rust Web开发实战：Actix Web框架全面指南

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，ZEEKLOG全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。 🏆《博客》：Rust开发，Python全栈，Golang开发，云原生开发，PyQt5和Tkinter桌面开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi，flask等框架，云原生K8S，linux，shell脚本等实操经验，网站搭建，数据库等分享。 所属的专栏：Rust语言通关之路 景天的主页：景天科技苑 文章目录 * Rust Web开发 * 一、Actix Web框架概述 * 1.1 Actix Web的特点 * 1.2 Actix Web与其他Rust框架比较
前端知识点全解析

前端知识点全解析

作为一名前端高级开发人员，面试不仅考察知识点的记忆，更关注对原理的理解、工程化的思考以及解决复杂问题的能力。本文将从 HTML/CSS、JavaScript、浏览器与网络、框架、工程化、性能优化、算法与设计模式等多个维度，系统梳理前端面试中的核心知识点，并提供深入解析及案例，帮助你在面试中展现出真正的技术深度。 1. HTML & CSS 基础 1.1 语义化 HTML 讲解：语义化 HTML 是指使用具有明确含义的标签（如 <header>、<nav>、<article>、<section>）来描述网页结构，而不是单纯使用 <div> 和 <span&

Local Moondream2实战案例：独立开发者用其构建AI绘画灵感助手App

Local Moondream2实战案例：独立开发者用其构建AI绘画灵感助手App 你有没有遇到过这样的创作瓶颈？脑子里有个模糊的画面，却怎么也找不到合适的词语来描述它，AI绘画工具生成的图片总是差那么点意思。或者，在网上看到一张惊艳的图片，想学习它的构图和风格，却不知从何分析起。 对于独立开发者或小型创意团队来说，聘请专业的设计师或购买昂贵的创意工具往往成本高昂。今天，我要分享一个实战案例：如何利用一个名为 Local Moondream2 的超轻量级工具，快速构建一个完全运行在你个人电脑上的“AI绘画灵感助手”，彻底解决上述痛点。 1. 为什么选择Local Moondream2？ 在开始动手之前，我们先搞清楚这个工具到底能做什么，以及它为何适合独立开发者。 简单来说，Local Moondream2 是一个给你的电脑装上“眼睛”的本地化应用。你上传任何图片，它都能“看懂”，并用英文告诉你图片里有什么。它的核心能力有三项，每一项都对创意工作者极具价值： * 详细描述图片：它能生成一段极其详尽的英文描述，远超简单的“一只猫在沙发上”。这段描述可以直接用作AI绘画（如S
【保姆级教程】Coze（扣子）从入门到发布全流程：手把手教你打造AI智能体（建议收藏）

【保姆级教程】Coze（扣子）从入门到发布全流程：手把手教你打造AI智能体（建议收藏）

最近小红薯上的这种内容特别火？但是手动制作这种图文内容真的太费时间了！ 要查资料、写文案、做排版、找配图…，一套流程下来已经过去大半天了。 今天就来教大家一个超实用的技巧——用扣子（Coze）工作流搭建一个智能体，只需输入一个名词，3分钟就能批量生成这种爆款图文。 废话不多说，直接上干货。 第一步、注册扣子 进入扣子官网（https://www.coze.cn），点击左上角「登录扣子」，通过手机号即可注册登录。 第二步、创建智能体 登陆扣子后，点击页面左上角⊕，选择创建智能体。 创建智能体有两种形式： 第一种是「手动创建」，输入智能体「名称」和「功能介绍」，然后单击图标旁边的生成图标，自动生成一个头像。 第二种就是「AI 创建」，输入你的智能体创建需求，扣子会根据你的描述自动创建一个专属于你的智能体。 第三步、编排智能体 任意选择一种创建形式后，单击确认进入「智能体编排页面」 「手动创建」