JavaScript中垂直读取Bitmatrix异常，图像显示错乱求助

我正在制作一个网站，需要实现以下功能：

• 图片上传
• 将图片调整为32×128尺寸
• 通过抖动或阈值滤镜转换为十六进制Bitmatrix

测试时使用image2cpp工具验证，水平读取Bitmatrix可以显示正确的图像：

水平读取的工作代码 #

// 工作代码：从画布获取图像
matrix = Array.from({ length: height }, (_, i) =>
  Array.from({ length: width }, (_, j) =>
    ctx.getImageData(j, i, 1, 1).data[0] > 0 ? 1 : 0
  )
);

// 将二进制转换为十六进制
return matrix
  .reduce((acc, row) => {
    acc += row.reduce((acc, value) => {
      acc += value > 0 ? "1" : "0";
      return acc;
    }, "");
    return acc;
  }, "")
  .match(/.{1,8}/g)
  .map((byte) => "0x" + parseInt(byte, 2).toString(16));

现在我需要垂直读取Bitmatrix，尝试转置矩阵后再转换为十六进制，但结果图像出现旋转且错乱，本该和水平读取的图像一致：

不工作的垂直读取代码 #

// 垂直读取：无法正常工作
matrix = Array.from({ length: height }, (_, i) =>
  Array.from({ length: width }, (_, j) =>
    ctx.getImageData(j, i, 1, 1).data[0] > 0 ? 1 : 0
  )
);

// 新增的转置代码
matrix[0].map((_, colIndex) => matrix.map(row => row[colIndex]));

// 后续转换逻辑和上方一致
return matrix
      .reduce((acc, row) => {
       // 此处省略相同的转换代码
       ....
      }

内容的提问来源于stack exchange，提问作者Markus Petzke