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'
