canvas图片黑白灰度转换需三步：图像加载完成后再获取像素；用加权公式gray=r×0.299+g×0.587+b×0.114计算灰度并原位写回rgb分量；跳过alpha通道保持透明度，最后putimagedata写回且确保同源与尺寸匹配。

Canvas 实现图片黑白灰度转换，核心是操作像素数据，不是简单调滤镜或改 CSS。关键在三步：正确获取像素、按人眼感知加权计算灰度值、原位写回且保留透明度。

确保图像加载完成再处理

Canvas 无法读取未加载完的图片像素。必须监听 img.onload，并在回调中绘制和处理：

• 创建 Image 对象，设置 src
• 在 onload 回调里调用 ctx.drawImage(img, 0, 0)
• 接着立即执行 getImageData，避免异步时序错误

用加权公式算灰度，别用平均值

人眼对绿色最敏感，对蓝色最不敏感。直接取 (r + g + b) / 3 会发闷、失真。标准做法是：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 对每个像素提取 r = data[i]、g = data[i+1]、b = data[i+2]
• 计算 gray = r * 0.299 + g * 0.587 + b * 0.114
• 用 | 0 快速取整（比 Math.floor 更高效）
• 把 gray 同时赋给 data[i]、data[i+1]、data[i+2]

保留 Alpha 通道，透明区域不变色

很多实现错误地把灰度值也写给了 alpha（data[i+3]），导致半透区域变实或变黑。正确做法是：

• 跳过 data[i+3] 的修改，让它保持原值
• 尤其对 PNG 图片，透明背景应完全保留，只改变 RGB 分量
• Uint8ClampedArray 自动限制值域（0–255），无需额外判断越界

写回画布前确认尺寸与同源

getImageData 返回的是副本，不写回就毫无效果。还要注意：

• 调用 putImageData(imageData, 0, 0) 显式写回
• canvas 宽高必须与图像原始尺寸一致，否则坐标越界或裁剪
• 跨域图片（如 CDN 地址）会触发安全策略，需设置 img.crossOrigin = 'anonymous'

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！