模糊图片在线

选一张图，设好模糊半径和输出格式，本页在浏览器画布里直接做出高斯模糊效果并给出下载链接。图片不上传服务器，全程本地处理，手机也能打开用。

处理口径：先把图画进比原图每边多 3 × 半径 像素的临时画布（羽化补边），加 blur(半径px) 后再裁回原尺寸，所以边缘不会露出透明缺口。演示值半径 8 像素对应补边 24 像素，仅作演示。

使用方法

给图片加模糊只要五步，中途可以随时改参数重来：

  1. 点「选择图片」挑一张 JPG、PNG 或 WebP，建议不超过 20 MB。超大图会占用较多内存，先用「最长边限制」缩一下更稳。
  2. 「模糊半径」填 8 像素。只想轻微柔化填 1～3，想让文字完全不可读填 20 以上，不确定就从 8 开始试。
  3. 「模糊模式」选全图模糊，或选中心清晰的矩形 / 椭圆 —— 后者会把画面中心按「中心清晰区占比」保留原清晰度，适合突出主体。
  4. 「输出格式」选 PNG（无损、支持透明）、JPEG（体积最小、不支持透明）或 WebP（兼顾两者）；「最长边限制」按需缩到 1600、1200 或 800 像素。
  5. 点「应用模糊」，或在半径输入框按 Enter。预览图和体积出现在结果区，满意后点「下载图片」；每次处理都会在下方日志里追加一行，方便复盘参数。

模糊图片在线能解决什么

它解决「为了打码或做背景，还得装个修图软件」的麻烦，适合三类场景：

  • 隐私打码：截图里的手机号、地址、订单号，用半径 8 像素以上整片糊掉，比画黑块更自然，也不会像纯色块那样被人猜出原始长度。
  • 封面与背景底图：把照片糊成只剩配色，再叠标题文字，可读性立刻上来；演示参数下画面只剩色块与明暗关系，正好当背景。
  • 突出主体的效果图：用中心清晰的椭圆模式，中心 40% 区域保持锐利、四周虚化，用来做商品焦点图或人像示意，不用手动抠图。

本页不做的事：不做马赛克（像素化）与涂鸦，只做高斯模糊；不做局部涂抹式的分区打码，中心清晰区只能是居中的矩形或椭圆；不保留 EXIF 等元信息，输出的是画布重绘后的像素；不批量处理，一次只能出一张。

原理和变量

① 用了哪个具体函数：核心是 Canvas 2D 的 ctx.filter = 'blur(半径px)' 配合 drawImage，再用第二个画布 drawImage 裁回原尺寸；导出用 canvas.toBlob，下载用 window.URL.createObjectURL，不引入任何图像处理库。

② 关键参数为什么这样取：羽化补边取 3 × 半径 而不是 1 倍，是因为高斯模糊按标准差扩散，半径即标准差，三倍之外的影响已低于人眼和 8 位色深的分辨能力 —— 补边不够会在四边留下半透明的羽化缺口，本页演示值因此补了 24 像素。

③ 遵循哪个标准：blur() 的口径与 CSS Filter Effects 一致，参数即高斯函数的标准差（像素）；JPEG 导出固定用 0.92 质量因子，PNG 走无损通道，WebP 用浏览器默认质量，三者都遵循浏览器自身的编码实现。

④ 输入怎么变成输出：演示值下原图先按「保持原图尺寸」不缩放，临时画布做成 宽 + 48 × 高 + 48，图从坐标 (24, 24) 画进去并加 blur(8px)，再把 (24, 24) 起的原尺寸区域裁到输出画布，最后按 PNG 编码出 blob 并显示体积。

⑤ 边界与阈值：半径限 0～100，0 表示不模糊；中心清晰区占比限 10～80；最长边限 0（原图）、1600、1200、800；超过 20 MB 的图片会提示先用别处压缩。半径或占比为负、非数字、超出区间都会给出指明字段的中文提示。

⑥ 常见误用的正确解释：模糊不是加密 —— 人脸或文字被糊掉后仍可能通过还原算法被猜出，敏感内容请勿只靠模糊处理；JPEG 不支持透明，原图带透明通道时导出 JPEG 会把透明处填成白色；放大后再模糊不会更清晰，本页只缩不放。

完整示例（数值仅作演示）

演示参数：模糊半径 8 像素、全图模糊、输出 PNG、保持原图尺寸、中心清晰区 40%。

  • 羽化补边：3 × 8 = 24 像素，临时画布每边比原图多 48 像素。
  • 绘制：原图从 (24, 24) 画进临时画布，同时施加 blur(8px)。
  • 裁切：从 (24, 24) 取原尺寸区域到输出画布，四边的羽化缺口被完整裁掉。
  • 编码：按 PNG 无损编码，结果区显示输出尺寸与体积（同一张 1920×1080 的照片通常在数百 KB 量级，实际值取决于画面细节）。
  • 换成中心清晰矩形：中心 40% 区域保持原图清晰度，四周仍是 8 像素模糊，主体立刻跳出来。
  • 换成半径 20：补边变成 60 像素，画面基本只剩大面积色块，适合当纯背景。

把这三组参数各跑一遍，再对照下方对照表看半径与视觉效果的对应关系，就能快速定下自己要的档位。

输入范围与对照表

可选范围：模糊半径 0～100 像素、中心清晰区占比 10～80%、最长边 0（原图）/1600/1200/800、输出格式 PNG/JPEG/WebP。下表给出半径与视觉效果的对应关系，羽化补边一律是 3 × 半径：

模糊半径与视觉效果对照（羽化补边 = 3 × 半径）
模糊半径（像素）羽化补边（像素）视觉效果常见用途
13轻微柔化，几乎察觉不到修掉噪点与镜头脏点
26皮肤轻度磨皮人像轻度美化
39边缘轻微发虚截图轻微脱敏
412小字号文字开始变糊遮住水印与角标
618轮廓可辨、细节基本丢失背景虚化
8（演示值）24只剩色块与明暗关系隐私打码、封面底图
1030主体轮廓仍可辨认卡片配图
1236仅剩大面积色块页面背景图
1648基本只剩整体配色卡片底纹
2060完全看不出具体内容毛玻璃效果背景
2575只剩两三种主色渐变底色取样
3090近似纯色块取色底图

半径越大，临时画布越大、耗时越长：半径 80 时每边补 240 像素，一张 4000 像素宽的图会让临时画布接近 8 倍像素量，建议先缩到 1600 再用大半径。

结果边界和舍入

尺寸舍入：缩放后的宽高用 Math.round 取整，羽化补边用 Math.ceil 向上取整，避免补边不足留下半透明边；中心清晰区的宽高同样取整，最大不超过输出画布。

什么时候会提示：没有选图就点「应用模糊」会提示先选图；选中的不是图片格式会提示文件类型不支持；文件超过 20 MB 会提示先压缩；半径不在 0～100、中心清晰区占比不在 10～80 会指明字段和允许区间；浏览器不支持 ctx.filter 时会提示换用较新版本浏览器。

格式与体积：PNG 无损但体积大，JPEG 用 0.92 质量因子、体积小且不支持透明，WebP 用浏览器默认质量。结果区显示的字节数取整到 1 KB（不足 1 KB 时显示到 0.1 KB），与下载文件的实际大小一致。

结果性质：输出是画布重绘后的位图，元信息不保留，缩放采用浏览器的双线性重采样，不做锐化补偿。模糊只是视觉处理，不构成脱敏或加密，敏感信息请勿仅依赖本页处理后对外发布。

常见问题

为什么边缘没有出现透明的羽化边？

因为本页先把图画进每边多出 3 × 半径 像素的临时画布再裁回原尺寸。演示值半径 8 时补边 24 像素，模糊扩散的部分落在补边里，裁切后四边是实的。

中心清晰模式能挪位置吗？

不能，清晰区固定居中，形状可选矩形或椭圆，大小由「中心清晰区占比」决定（10～80%）。需要偏移的清晰区，请先用别的工具裁好图再上传。

PNG 和 JPEG 该选哪个？

要透明底或后续还要再编辑选 PNG；只是发网上、想省流量选 JPEG（质量因子 0.92）；两者都想要一点，选 WebP。注意 JPEG 不支持透明，透明处会被填成白色。

大图处理很慢或卡住了怎么办？

先在「最长边限制」里缩到 1600 或 1200 再处理。半径 40 以上时临时画布会大很多，大图加大半径是最容易卡的组合，建议先缩小、再加大半径。

模糊后的脸还能被认出来吗？

不要赌。模糊只是降低视觉可辨识度，不是加密，也不具备不可逆性。涉及真实人脸、证件、手机号的内容，请用不可逆的遮盖方式处理，或干脆不发布。

能一次处理多张图片吗？

不能，本页一次只处理一张。多张请逐张处理后下载；处理日志会保留每次的参数，方便你按同一组参数复现。

输出的图片还带原图的位置信息吗？

不带。输出是画布重绘后的像素，EXIF、GPS 等元信息不会保留。如果你正是为了去掉位置信息才处理图片，这一点是好事；若需要保留拍摄参数，请留存原文件。

我的图片会被上传吗？

不会。选图后只在浏览器内存里解码与绘制，点「应用模糊」时没有任何网络请求发出，可在 Network 面板复查；关闭或刷新页面即清空。

相关工具