浏览器里的图片修复：擦掉瑕疵、4倍超分，3步出图

浏览器里的图片修复擦掉瑕疵、4倍超分3步出图【免费下载链接】inpaint-webA free and open-source inpainting image-upscaling tool powered by webgpu and wasm on the browser。| 基于 Webgpu 技术和 wasm 技术的免费开源 inpainting image-upscaling 工具, 纯浏览器端实现。项目地址: https://gitcode.com/GitHub_Trending/in/inpaint-webInpaint-web 是一款免费开源的浏览器端图像修复inpainting与4倍超分辨率工具。上传图片、用笔刷涂掉想消除的部分、松开鼠标出图——全程不装软件、不部署服务器两个模型都跑在你自己的设备上照片不会离开你的电脑。过去的图像修复基本只有两条路要么打开专业桌面软件在选区工具和填充滤镜里摸索要么把照片上传到在线云服务排队等结果。前者重光是去掉一个水印就要走选区加填充的流程后者让人不踏实——肖像、未发布的新品图、合同扫描件点下上传键的那一刻数据就进了别人的服务器而且免费额度往往对输出分辨率卡得很死。还有一层更底层的矛盾修复效果好的工具背后都是深度学习模型算力需求高普通办公电脑和手机根本跑不动本地推理。 双引擎计算WebGPU 优先WASM 兜底这个项目的核心思路是借助ONNX Runtime Web神经网络推理引擎的浏览器版本项目锁定 1.16.3 版本在浏览器里加载两个 ONNX 格式的模型修复模型用的是MI-GAN超分模型用的是Real-ESRGAN。跑之前它会先体检一遍——探测当前浏览器是否支持WebGPU、WebAssembly是否支持多线程和SIMD指令然后挑最快的执行后端// 依据能力探测创建推理会话有 WebGPU 就走 GPU否则回退 WASM const capabilities await getCapabilities() const model await ort.InferenceSession.create(modelBuffer, { executionProviders: [capabilities.webgpu ? webgpu : wasm], })WebGPU 是 W3C 推出的面向 Web 的 GPU新标准相比上一代 WebGL它提供compute shader计算着色器编程模型神经网络的矩阵乘法可以直接摊到 GPU 核心上并行执行。浏览器不支持它时项目自动切到多线程序列的 WASM 路径线程数取 CPU 逻辑核心数——体验降级但功能不丢。这条能力阶梯的完整判断在 src/adapters/util.ts 里四档组合webgpu、wasmSIMD、wasm-core、纯 JS各加载一份对应的运行时构建。另一处容易被忽略的细节模型不是每次下载。src/adapters/cache.ts 用localforage把下载好的 ONNX 文件写进浏览器的IndexedDB本地存储第二次再打开页面时直接从本地读弱网环境下也能用。切块处理4倍放大不炸内存超分辨率是更吃内存的功能。Real-ESRGAN 把每个像素放大成 4×4一张 2000×1500 的图输出就是 8000×6000中间张量的显存需求是输入面积的 16 倍整图一次推理在浏览器里基本不现实。src/adapters/superResolution.ts 的解法是切片tiling// 把图像切成 64×64 小块逐个推理四周重叠 6 像素防止拼接出现接缝 const tileSize 64 const tilePadding 6 const tileSizePre tileSize - tilePadding * 2 // 每块实际覆盖 52×52 像素每块 64×64四周各垫 6 像素的邻域像素再喂给模型算完只保留中间的 52×52 区域——重叠的部分就是用来抹掉相邻块之间可见的拼接痕迹。每处理完一块就通过回调上报进度界面上那条百分比进度条正是它。最终输出图的宽高都是原图的 4 倍。用大白话说就是把一块烤不下的大蛋糕切小片、一片一片下锅这是 4 倍超分能在普通浏览器标签页里跑通的关键。修复流程则更直接原图和你涂的蒙版分别被 opencv-ts 转成模型要的 CHW 格式一起喂给 MI-GAN返回的结果再写回 Canvas 画布前后处理都在 src/adapters/inpainting.ts 里完成。 三步完成一次编辑使用流程被压到三个动作上传拖入一张照片或用仓库里 public/examples/ 下的 8 张示例图宠物、街景、商品先试手涂抹用笔刷圈出要消除的区域笔刷大小 10~200 像素可调红色半透明预览跟着鼠标走松手自动开始修复结果进入顶部历史缩略图栏。出图之后几个细节让操作更顺CtrlZ 撤销回到上一版历史缩略图上悬停可回到这点开Original按钮会展开一条可拖动的对比分割线同一张图左右对照前后效果分割线位置随手拉。这套界面改造自 cleanup.pictures作者在 README 的致谢里明确说明了来源。两个高频用法电商商品图清理台面杂物。下面这张示例是仓库自带的演示图之一桌面上散着相机、笔记本、T恤等一堆小物件要抠出干净的主图传统做法是逐个圈选、填充。流程是放大到杂物位置 → 用 100~200 像素的大笔刷涂掉边缘不用抠得精确模型会依据周围纹理推断补全→ 松手。瑕疵清完再点一次超分辨率按钮放大 4 倍输出可以直接喂给大尺寸广告位。全程在浏览器里完成商品图不进任何第三方服务器——对还没发布新品的电商团队来说这一点和速度同样重要。宠物照、老照片4倍超分辨率。这条路径甚至不用涂抹蒙版点一下按钮就行Real-ESRGAN 的长处是纹理还原对比图里能看到原图的毛发边缘和面部斑点被补回了细部画面尺寸同时放大到 4 倍——这正是模糊的老照片和小尺寸宠物照最需要的两件事。对比浏览器本地赢在哪维度Inpaint-web浏览器本地云端在线工具桌面软件照片上传零上传不出本机全部上传无部署成本打开网页注册账号安装加授权算力位置浏览器 GPU / WASM远端服务器本地4倍超分内置常见付费或限档需另装插件离线可用可以模型已缓存不行可以其中最实在的一条是零上传本地模型加本地推理把隐私问题从流程结构上绕开了而不是靠服务条款承诺。边界与下一步客观说它不完美。第一WebGPU 的浏览器覆盖尚不完整项目用 WASM 兜底解决了能不能用但没有 GPU 的设备上超分速度会明显变慢第二超大图比如 8K 级别即便切片也有浏览器内存上限切片参数未必适配所有场景第三修复质量取决于 MI-GAN 模型本身大面积、复杂纹理的遮挡补全比如整块人形遮挡主体效果和人工精修仍有差距。README 里的路线图列了三项待办接入 Segment Anything实现快速选择和去除——当前的手动涂抹正是流程里最费事的一环接入 Stable Diffusion把消除升级成替换以及更好的界面。这三个方向恰好贴着浏览器成为通用计算平台的趋势WebGPU 在各浏览器逐步标配之后过去必须交给桌面 GPU 的活浏览器标签页就能接住。下次照片里出现一个多余的东西先别打开修图软件——打开浏览器涂掉它比想象中快。【免费下载链接】inpaint-webA free and open-source inpainting image-upscaling tool powered by webgpu and wasm on the browser。| 基于 Webgpu 技术和 wasm 技术的免费开源 inpainting image-upscaling 工具, 纯浏览器端实现。项目地址: https://gitcode.com/GitHub_Trending/in/inpaint-web创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考