日常开发中，我们常遇到图片去水印、人像抠图、尺寸调整等需求。传统方案多依赖后端接口或第三方工具，不仅有调用成本，还存在数据隐私风险。本文将分享一套纯前端落地的图片处理方案，从技术选型到优化细节，拆解每一个实现环节。
一、图片去水印：FFmpeg 前端化处理
去水印是素材处理的高频需求，后端常用 FFmpeg 实现，但前端可通过ffmpeg.js（FFmpeg 的 WebAssembly 移植版）完成本地处理。
核心原理：借助 FFmpeg 的delogo滤镜，定位水印区域后，通过插值算法覆盖水印像素，全程在浏览器内存中执行，无需上传原图。
实现要点：
- 引入
ffmpeg.js并加载核心 Wasm 文件，避免阻塞主线程； - 通过 Canvas 获取图片像素数据，转换为 FFmpeg 可识别的帧格式；
- 配置水印坐标（x/y）、宽高（w/h），执行
delogo滤镜处理； - 处理完成后转回图片格式，直接在前端预览或下载。
优势：纯本地处理、无服务器依赖、免费无调用限制；缺点：复杂背景下水印边缘可能有轻微模糊，适合固定位置水印场景。
二、端侧 AI 抠图：前端加载模型本地推理
人像抠图是证件照、头像制作的核心步骤，主流方案分 “后端 API 调用” 和 “端侧本地推理”，这里选择前端加载 ONNX 模型的方案。
技术选型
采用轻量级人像分割模型（RMBG），模型体积仅 180MB左右，我下了几个都在这个量级区间，如果是量化过后的还有80多的，适配浏览器环境；通过onnxruntime-web实现前端推理，无需后端参与。
实现流程
- 模型加载：首次访问时下载 ONNX 模型文件，缓存到 IndexedDB；二次访问直接从本地缓存读取，无需重复下载，大幅提升加载速度；
- 图像预处理：通过 Canvas 压缩图片尺寸、归一化像素值，适配模型输入要求；
- 本地推理：前端执行推理，没做优化，应该放到Web Worker会好点，输出人像 Alpha 遮罩；
- 图像合成：将遮罩与原图叠加，生成透明背景的抠图结果。
性能实测
优势：零后端成本、数据不泄露、隐私性强；缺点：推理速度依赖设备性能 ——PC 端处理一张图片 30 秒左右，手机端（中端机型）约 30-60 秒，1 分钟内可完成处理，日常使用完全可接受。
三、图片尺寸修改：Canvas 快速适配
图片尺寸调整是最简单的模块，核心依赖Canvas API即可实现，无需引入额外库。
实现逻辑：
- 创建指定尺寸的 Canvas 画布；
- 计算原图与目标尺寸的比例，保持比例裁剪或拉伸；
- 通过
drawImage方法将原图绘制到画布； - 导出画布为 Blob 或 Base64 格式，完成尺寸修改。
特点：代码简洁、执行速度快，支持自定义宽高、比例裁剪、圆角处理等扩展功能。
四、证件照生成：抠图 + 尺寸调整组合应用
证件照本质是 “人像抠图 + 标准尺寸裁剪 + 背景替换” 的组合需求，基于前两个模块可快速实现：
- 上传人像照片，执行前端 AI 抠图，生成透明背景人像；
- 按证件照标准（如 1 寸 25mm×35mm、2 寸 35mm×49mm）调整尺寸；
- 叠加纯色背景（红 / 白 / 蓝），生成合规证件照；
- 支持一键下载，全程无水印、无压缩失真。
五、核心优化：IndexedDB 缓存模型
前端推理的最大痛点是模型体积大、首次加载慢，这里通过 IndexedDB 做持久化缓存，彻底解决重复加载问题：
- 首次访问：检测 IndexedDB 是否存在模型缓存，无则下载 100+MB ONNX 模型，存入 IndexedDB；
- 二次访问：直接从 IndexedDB 读取模型数据，跳过网络下载，加载速度提升 90%；
- 缓存管理：支持模型版本更新、缓存清理，避免占用过多本地空间。
六、总结与工具推荐
以上方案将FFmpeg 去水印、端侧 AI 抠图、Canvas 尺寸调整三大能力整合，纯前端实现图片处理全流程，无后端依赖、免费无广告、隐私安全有保障。
满足日常素材处理、证件照制作等需求，无需安装任何软件，浏览器直接打开即可使用。
免费工具地址：winljm001.github.io/tools-web/#…功能包含：图片去水印、AI 抠图、尺寸修改、证件照生成，所有功能永久免费，欢迎体验～
