Unable to display Uint8Array in Electron / Nodejs

Question

I've got a big Uint8Array (frame of a camera) encoded in bgra8 that because of reasons I receive as Buffer. I'm adding this information in case someone points out this could be part of the problem:

This is the data when sent:

This is the code of the conversion of the data when sent:

Buffer.from(cam_message.data)

This is the data when received in the Electron main process (a different frame):

In order to display this data I make the conversion explained here: How to display a JPG image from a Node.js buffer (UInt8Array)

That is, I send this to the renderer process:

Buffer.from(camdata).toString('base64')

In the renderer process I receive this as a variable value, and I update the src of the image:

imgeg.src = `data:image/jpg;base64,${value}`

But the image is never shown (only is shown the "image" icon, so not a problem with HTML). So could this be a problem with the bgra8? Or the Buffer or Uint8Array data types and my lack of knowledge in how to use them?

Answer 1

As @AndrewParks told me, it was a problem with how I tried to display this image as a jpg instead of treating it as bgra8, which was the correct encoding. This is the code I wrote:

Instead of a Buffer now I convert the data to Uint8Array again once I receive it and before sending it to the renderer process:

Uint8Array.from(camdata.data)

In the renderer process I receive this as a variable value, and I use a <canvas> instead of an <img>:

      var canvas = document.getElementById('canv');
      var ctx = canvas.getContext('2d');
      var canvasWidth = canvas.width;
      var canvasHeight = canvas.height;
      ctx.clearRect(0, 0, canvasWidth, canvasHeight);
      var id = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
      var pixels = id.data;

      for(var i=0; i<pixels.length; i=i+4){
          pixels[i] = value[i+2];
          pixels[i+1] = value[i+1];
          pixels[i+2] = value[i];
          pixels[i+3] = 255;
      }
      ctx.putImageData(id, 0, 0);

See: What's the best way to set a single pixel in an HTML5 canvas?