How to decode a binary buffer to an image in node.js?

Question

0.00/5 (No votes)

See more:

The code below converts the binary to a base64 image and displays it exactly on the canvas.
However, I don't want to use base64 for two reasons.

First, I know that base64 increases the size. For features that use a lot, this doesn't seem like a good idea.
This image is of a large size. It could also be 1920x1080.

second. base64 is suitable for firefox browser. However, it doesn't work well on Chrome or Edge. Sometimes it displays pictures and sometimes it doesn't.

I would like to know how to decode binary buffer directly to jpeg without using base64.

Thanks your time.

What I have tried:

var imageBuffer = new Buffer.alloc(data.size);

var fd = fs.openSync('/file.dat', 'r');

fs.readSync(fd, imageBuffer, 0, size, Address);

/* data.src is the value returned by ajax. */
data.src = 'data:image/jpeg;base64, '+imageBuffer.toString('base64');

fs.close(fd, function(){

});

in js Canvas

theCanvas = document.getElementById("canvas");
context =theCanvas.getContext("2d");

var displayImage = new Image();
displayImage.onload = function(){
 context.drawImage(displayImage, 0, 0);
};
displayImage.src = data.src;

Posted 30-Apr-21 22:12pm

Chopin2001

Updated 1-May-21 5:49am

Add a Solution

2 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Jon McKee · Answer 1 · 2021-04-30T23:22:00

Something like this should work:

JavaScript

let binary = Buffer.from(data); //or Buffer.from(data, 'binary')
let imgData = new Blob(binary.buffer, { type: 'application/octet-binary' });
let link = URL.createObjectURL(imgData);

let img = new Image();
img.onload = () => URL.revokeObjectURL(link);
img.src = link;

Tweak the above to meet your needs. Mainly it depends on what kind of data is coming in. Look at the various Buffer.from methods and pick what's appropriate, or just go with the Blob constructor directly if you've already got a format it accepts (ArrayBuffer, ArrayBufferView, Blob, or USVString).

References:
Using files from web applications - Web APIs | MDN[^]
Buffer | Node.js v16.0.0 Documentation[^]
Blob() - Web APIs | MDN[^]

Chopin2001 · Answer 2 · 2021-05-01T05:49:00

Solution 2

//node.js

var imageBuffer = new Buffer.alloc(data.size);

var fd = fs.openSync('/file.dat',  'r');
fs.readSync(fd, imageBuffer, 0, size, address);

let binary = Buffer.from(imageBuffer, 'binary');
fs.close(fd, function(){});


//in javascript
S.ajax({
  url:"http://protocol.",
  dataType: "json",
  type:"GET",
  data: {data: id, prog: progress},
  success: function(result){
      if(result){
           let blob = new Blob([new ArrayBuffer(result.src)], {type: "image/jpeg"});
           const url = window.URL.createObjectURL(blob);
           image.src = url;
           window.URL.revokeObjectURL(url);
           drawScreen(); // re-draw screen
      }
  }

But The image does not appear.

Posted 1-May-21 5:49am

Chopin2001

Comments

Jon McKee 1-May-21 17:20pm

revokeObjectURL should be on the image's onload event. It destroys the object URL so should only be called once the image is loaded.

Chopin2001 2-May-21 0:29am

//node.js 
var imageBuffer = new Buffer.alloc(data.size);
var fd = fs.openSync('/file.dat', 'r');
fs.readSync(fd, imageBuffer, 0, size, address);

data.src = Buffer.from(imageBuffer, 'binary'); 
//or 
data.src = imageBuffer // is no good?

//in js

$.ajax({ .....
   success: function(data){
      image.src = createFromURL(data.src);
      drawScreen(); //draw
      window.URL.revokeObjectURL(image.src); // delete memory

var createFromURL = function(src){
let blob = new Blob([new ArrayBuffer(src)], {type: "image/jpeg"});
const url = window.URL.createObjectURL(blob);
return url;
}

Chopin2001 2-May-21 1:01am

Is this different?
data.src = Buffer.from(imageBuffer, 'binary')
data.src = imageBuffer.toString('binary');

How to decode a binary buffer to an image in node.js?

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

How to decode a binary buffer to an image in node.js?

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us