如何在JavaScript中对画布图像进行灰度化？

我有一个HTML5画布内的图像，大小为28x28像素。我使用以下代码将画布的imageData作为RGBA（红色、绿色、蓝色、alpha）值的数组获取：

canvas = document.getElementById('canvas');
ctx = canvas.getContext("2d");
imgData = ctx.getImageData(0, 0, 28, 28);

现在我想对图像进行灰度化，以便得到一个784个值（28x28像素）的数组，其中每个像素有一个值（而不是四个）

我发现了很多不同的灰度缩放公式，有些是乘以rgb值，有些只是计算平均值-我真的不知道使用哪一个

我还坚持要得到784个值——总是3136个（因为有4个通道）

---

提前谢谢

主要思想是使颜色的红、绿和蓝分量具有相同的值。为此，您需要计算每个像素的亮度。有几种方法可以计算亮度。这是其中之一

window.onload=function（）{
让canvas=document.getElementById（“c”）；
设ctx=canvas.getContext（“2d”）；
宽度=50；
高度=50；
让srcImg=document.getElementById（“sof”）；
drawImage（srcImg，0，0，ctx.canvas.width，ctx.canvas.height）；
让imgData=ctx.getImageData（0，0，ctx.canvas.width，ctx.canvas.height）；
设像素=imgData.data；
对于（变量i=0；i

---

您可以直接为渲染上下文设置过滤器。这将比计算每个像素的颜色更简单

为此，您应该使用

ctx.filter='grayscale（1）'


const img=document.querySelector（'img'）；
const canvas=document.querySelector（'canvas'）；
const ctx=canvas.getContext（'2d'）；
img.onload=函数（）{
canvas.width=img.width；
canvas.height=img.height；
ctx.filter='灰度（1）'；
ctx.drawImage（img，0，0，img.width，img.height）；
}

是的，有多个公式，您需要选择一个。没有一个真正的公式。好的，thx，但是我如何在灰度化后得到一个784个值的数组？每个像素有四个值的数组？在你的四个循环中，只有两个计数器-每次迭代一个
I+=1
，一个
j+=4
。太好了！带有两个计数器的for循环工作得很好（idk为什么我自己没有想到这个）-谢谢！这不是OP想要的，因此也不是对这个问题主体的回答，但是对于标题，请注意CSS过滤器已经添加到Canvas2D API中，并且在支持浏览器的情况下，您可以通过简单地将上下文过滤器设置为
“grayscale（100%）”
来实现灰度效果，然后使用“副本”在画布上绘制GlobalComposite操作模式。非Safari：(