图片黑白转换工具
将彩色图片转换为黑白灰度效果，支持批量处理
拖拽图片到此处，或点击选择文件
支持 JPG、PNG、WebP、BMP、GIF 格式，可一次选择多张
什么是图片黑白转换？
图片黑白转换是将彩色图片转换为灰度图片的过程。灰度图片只包含黑白灰色调，没有彩色信息。本工具采用加权平均算法（R×0.299 + G×0.587 + B×0.114），该算法符合人眼对颜色的感知特性，能够保留图片细节的同时产生自然柔和的黑白效果。转换后的黑白图片广泛应用于艺术摄影、证件照处理、文档扫描、复古风格设计等场景。 实际使用时还需要关注对比度、亮部层次和暗部细节，尤其是带文字、证件信息或产品纹理的图片，转换后最好放大检查关键区域是否仍然清晰。
使用方法
使用方法
- 拖拽或点击上传图片（支持多选）
- 点击「转换」按钮进行批量处理
- 查看结果，可单独下载或一次性全部下载
下载前
- 对比度敏感时按实际大小预览结果；灰度转换可能掩盖彩色警告或标签。
- 用于设计审查、医疗、法律或产品文档时，请保留原始图片。
使用场景
技术原理
图片灰度转换将每个像素从 RGB 色彩空间转换为单一亮度值，表示感知亮度。本工具使用亮度法（也称为加权平均法），由 ITU-R BT.601 标准定义（标清电视标准）：Gray = R × 0.299 + G × 0.587 + B × 0.114。这些系数反映了人眼视觉系统的敏感度——视网膜锥体细胞大约 64% 对红色敏感（L 锥体）、32% 对绿色敏感（M 锥体）、2% 对蓝色敏感（S 锥体），权重近似各通道对感知亮度的亮度贡献。绿色权重占 58.7% 是因为人眼在光谱的绿黄区域（约 555 nm）最为敏锐。 作为对比，其他常见灰度方法产生不同结果。平均法（Gray = (R + G + B) / 3）对所有通道一视同仁，产生不自然的深红色和不自然的亮蓝色。HSL/HSV 色彩空间中的去饱和法将饱和度设为零，比平均法更准确但不如亮度加权法准确。ITU-R BT.709（高清电视标准）的 Luma 方法使用略不同的系数（0.2126、0.7152、0.0722），对具有不同白点的现代显示器更准确。此处使用的 BT.601 系数仍然是最广泛实现的，在最广泛的输入图像范围内产生自然的结果。 处理流程完全在浏览器中运行。上传的图片由浏览器原生图片解码器解码（支持 JPEG、PNG、WebP、BMP 和 GIF）为 HTMLImageElement。通过 ctx.drawImage() 将图片绘制到 Canvas 元素上，触发浏览器的 GPU 加速合成器执行色彩空间转换和缩放。getImageData() 读回原始 RGBA 像素缓冲区为 Uint8ClampedArray——每个像素占 4 个连续字节（R、G、B、A），因此数组长度为宽度 × 高度 × 4。灰度循环以步长 4（i += 4）迭代，计算加权和，并将相同的灰度值写入三个 RGB 通道同时保留原始 Alpha 通道。putImageData() 将修改后的缓冲区写回画布。最后 canvas.toBlob('image/png') 将结果编码为无损 PNG，URL.createObjectURL() 为下载链接创建 blob: URL。 批量处理时，每个图片按顺序处理以避免使主线程饱和——循环通过 await 等待每个转换 Promise 完成后再开始下一个。画布在图片间复用而非重新创建，避免 GPU 纹理分配开销。原始 File 对象与灰度 Blob 一起保留，以便从原始文件名添加 '_grayscale' 后缀来派生下载文件名。
- ITU-R BT.601 亮度系数：R × 0.299 + G × 0.587 + B × 0.114——源自 CIE 1931 标准观察者的明视觉光效函数，这些权重模拟了人眼视网膜锥体细胞的分布（L:M:S ≈ 64:32:2）及 555 nm（绿黄色）处的峰值敏感度。
- 方法对比：平均法 (R+G+B)/3 产生深红色和亮蓝色；去饱和法（HSL S=0）更好但感知上不均匀；BT.709 Luma（0.2126R + 0.7152G + 0.0722B）对高清电视显示器更准确，但此处使用的 BT.601 权重在浏览器和图片工具中支持最广泛。
- Canvas 像素流水线：drawImage() → GPU 合成器解码和缩放 → getImageData() 读取 RGBA Uint8ClampedArray → 逐像素加权求和循环（步长 4，i += 4）→ putImageData() 写回 → toBlob('image/png') 编码为无损 PNG → createObjectURL() 用于下载。
- Alpha 通道保留：Alpha 字节（索引 i+3）被读取但不修改——透明像素保持透明，原始 Alpha 值原样传递，这对带有透明度或抗锯齿边缘的 PNG 图像很重要。
- 顺序批处理：每个图片通过 await 逐个处理以避免使主线程饱和——Canvas 元素在图片间复用，File 对象被保留以便从原始文件名添加 '_grayscale' 后缀来派生下载文件名。
- 伽马考量：BT.601 系数应用于伽马编码的 sRGB 值而非线性光强度——这是标准方法，在显示时产生视觉上正确的结果，但需要物理光测量的应用（科学成像、光度测量）应先将 sRGB 值线性化。
- 内存管理：每个灰度 Blob 通过对象 URL 保留在内存中，直到图片被移除或页面关闭——移除时调用 URL.revokeObjectURL() 防止内存泄漏，当没有引用时 Blob 的内存会被释放。
示例
人像照片转换
上传彩色人像照片 → 点击转换 → 得到艺术感黑白人像证件照处理
上传彩色证件照 → 转为黑白 → 满足部分证件照要求风景照艺术化
上传风景照片 → 转为黑白 → 突出光影与构图常见问题
图片是在本地处理的吗？
是。转换通过浏览器中的 canvas 操作完成，图像数据不会上传。可以在 Network 面板确认。
使用的是哪种灰度公式？
默认使用感知亮度公式：gray = 0.299·R + 0.587·G + 0.114·B（BT.601）。这与人眼对亮度的感知一致——绿色贡献最大。部分页面也会提供 BT.709（0.2126/0.7152/0.0722，用于高清电视）和「简单平均」。
为什么我的灰度图看起来很平？
因为颜色携带的信息会被映射成相同的灰度。两种亮度相近、颜色不同的色彩（亮度相同的红色和青色）会变得难以区分。对摄影师来说，有时按通道混合（多一些红、少一些蓝）比标准公式更出对比。
原始颜色还能恢复吗？
不能。灰度转换是有损的——色度通道被丢弃了。请始终在灰度副本之外保留原始彩色文件。
输出哪些格式？
默认 PNG 以保留质量。JPEG 和 WebP 通常用于更小的文件。在大多数格式中，灰度图仍以 3 通道 RGB 形式存储（每个像素 R=G=B）；真正的单通道存储需要更专业的工具。
可以批量转换多张图片吗？
一次拖入多个文件——每张都在浏览器中独立处理。实际限制取决于内存；非常大的批量（合计数百 MB）会拖慢浏览器。
透明度怎么处理？
alpha 通道会保留。PNG 和 WebP 保留原透明度；JPEG 因为没有 alpha 通道，会将其合成到白色背景上。