I want to make a website to upload images, resize them to 32×128, convert them to hex bitmatrix with an Filter like dithering or Threshold. For testing I use the image2cpp from the Github user “javl”. Reading my bitmatrix as horizontal works and it shows the correct horizontal image

//Working Code
//Get Image from Canvas

    matrix = Array.from({ length: height }, (_, i) =>
      Array.from({ length: width }, (_, j) =>
        ctx.getImageData(j, i, 1, 1).data[0] > 0 ? 1 : 0
      )
    );
   
//Convert binary to hex
    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));
  

Now i want to read my bitmatrix as vertical.
For that I tried to transpose the matrix and convert it to hex.
But my wrong vertical result looks rotated and split up.
it should be the same as above.

//read as vertical
//not working
    matrix = Array.from({ length: height }, (_, i) =>
      Array.from({ length: width }, (_, j) =>
        ctx.getImageData(j, i, 1, 1).data[0] > 0 ? 1 : 0
      )
    );

//new code
    matrix[0].map((_, colIndex) => matrix.map(row => row[colIndex]));

//same conversion as above
    return matrix
          .reduce((acc, row) => {
           ....