Javascript 28x28 Canvas ctx.getImageData（）返回大数组

我需要代码方面的帮助，我正在进行IA手写识别，因此首先我尝试将单像素绘制到28x28画布中，因此，当我使用ctx.GetImageData（）.data时，我可以得到一个值为0-255的28x28数组，而不是3135大小的数组。我不知道我做的是否正确，以下是我的代码：

//用于引用画布和2dcanvas上下文的变量
var画布，ctx；
//用于跟踪鼠标位置和左键状态的变量
var mouseX，mouseY，mouseDown=0；
//在提供的画布名称上的特定位置绘制点
//参数包括：画布上下文、x位置、y位置、点的大小
函数drawDot（ctx、x、y）{
设pxData=ctx.getImageData（x，y，28，28）；
pxData.data[0]=0；
pxData.data[1]=0；
pxData.data[2]=0；
pxData.data[3]=255；
ctx.putImageData（pxData，x，y）；
}
//使用画布宽度和高度清除画布上下文
函数clearCanvas（canvas，ctx）{
clearRect（0，0，canvas.width，canvas.height）；
}
//保持鼠标按钮被按下的轨迹，并在当前位置绘制一个点
函数sketchpad_mouseDown（）{
mouseDown=1；
drawDot（ctx、mouseX、mouseY）；
}
//跟踪正在释放的鼠标按钮
函数sketchpad_mouseUp（）{
mouseDown=0；
}
//跟踪鼠标位置，如果当前按下鼠标按钮，则绘制一个点
功能画板\鼠标移动（e）{
//移动时更新鼠标坐标
getMousePos（e）；
//如果当前正在按下鼠标按钮，则绘制一个点
if（mouseDown==1）{
drawDot（ctx、mouseX、mouseY）；
}
}
//获取相对于画布左上角的当前鼠标位置
函数getMousePos（e）{
如果（！e）
var e=事件；
如果（e.offsetX）{
mouseX=e.offsetX；
mouseY=e.offsetY；
}否则如果（如layerX）{
mouseX=e.layerX；
mouseY=e.layerY；
}
}
//设置画布并在页面加载后添加事件处理程序
函数init（）{
//从HTML文档中获取特定的画布元素
canvas=document.getElementById（'sketchpad'）；
//如果浏览器支持画布标记，请获取此画布的二维图形上下文
if（canvas.getContext）
ctx=canvas.getContext（'2d'）；
//在添加事件处理程序之前，请检查是否有一个有效的上下文可供使用
如果（ctx）{
canvas.addEventListener（'mousedown'，sketchpad_mousedown，false）；
canvas.addEventListener（'mousemove'，sketchpad_mousemove，false）；
window.addEventListener（'mouseup'，sketchpad_mouseup，false）；
}
}
函数exportData（）{
//常量normalarray=Array.prototype.slice.call（imgdata）；
const data=ctx.getImageData（0,0,28,28）；
控制台日志（数据）；
}

画板
#画板{
边框：1px实心#888；
}
获取数组

28*28*4恰好是3136所以我得到了一个RGBA数组列表？-ImageData.data是一个Uint8ClampedArray，表示一个一维数组，其中包含RGBA顺序的数据，整数值介于0和255之间（包括255）。明白了！谢谢问题解决了。