Click here to Skip to main content
15,031,345 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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
Updated 1-May-21 5:49am

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[^]
   
v2
Comments
Chopin2001 1-May-21 8:24am
   
Is possible using blob in node.js?

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

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

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

data.src = new image();
img.onload = () => URL.revokeObject(link);
data.src = link;


Blob is not defined.
URL.createObjectURL is not a function

Thanks Jon.
Chopin2001 1-May-21 8:31am
   
createObjectURL and revokeObject is not support in node.js
Thanks for showing me a good way, I'll try to find a way based on this.
//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.
   
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');

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




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900