0

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:

enter image description here

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): enter image description here

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?

user2952272
  • 361
  • 3
  • 18
  • You said the data is in `bgra8` format. However, you are trying to load it as if it were in JPG format. You need to draw the pixels on a canvas instead – Andrew Parks Mar 23 '23 at 01:59
  • Hi @AndrewParks, could you be a bit more specific or send me a link? I spent some time looking for displaying ```bgra8``` in ```javascript``` and couldn't find a thing. – user2952272 Mar 23 '23 at 08:16
  • 1
    You have to read each pixel in the array, and draw a pixel of each color on a javascript canvas. See https://stackoverflow.com/questions/4899799/whats-the-best-way-to-set-a-single-pixel-in-an-html5-canvas – Andrew Parks Mar 23 '23 at 08:40

1 Answers1

0

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?

user2952272
  • 361
  • 3
  • 18