Reading binary files in JavaScript Read unsigned int byte u32 u16 float etc var ArrayBufferCursor function arrayBuffer console log ArrayBufferCursor creation this dataview new DataView arrayBuffer 0 this size arrayBuffer byteLength this index 0 this next function type switch type case Uint8 var result this dataview getUint8 this index this index 1 return result case Int16 var result this dataview getInt16 this index true this index 2 return result case Uint16 var result this dataview getUint16 this index true this index 2 return result case Int32 var result this dataview getInt32 this index true this index 4 return result case Uint32 var result this dataview getUint32 this index true this index 4 return result case Float case Float32 var result this dataview getFloat32 this index true this index 4 return result case Double case Float64 var result this dataview getFloat64 this index true this index 8 return result default throw new Error Unknown datatype this hasNext function return this index this size return this create array buffer and put contents in it const arrayBuffer new ArrayBuffer 64 console log arrayBuffer byteLength arrayBuffer byteLength let ab new Uint8Array arrayBuffer 0 2 ab 0 1 ab 1 2 new Float32Array buffer byteOffset length let af new Float32Array arrayBuffer 4 1 af 0 5 0 reading var cursor new ArrayBufferCursor arrayBuffer console log cursor cursor let nextValue 0 nextValue cursor next Uint8 console log nextValue nextValue nextValue cursor next Uint8 console log nextValue nextValue nextValue cursor next Uint8 console log nextValue nextValue nextValue cursor next Uint8 console log nextValue nextValue for cursor hasNext nextValue cursor next Float console log nextValue nextValue console log ready Try out the above but on a binary file we ve downloaded e g binary png const response await fetch https notebook xbdev net var images test512 png const arrayBuffer await response arrayBuffer var ArrayBufferCursor function arrayBuffer console log ArrayBufferCursor creation this dataview new DataView arrayBuffer 0 this size arrayBuffer byteLength this index 0 this next function type switch type case Uint8 var result this dataview getUint8 this index this index 1 return result case Int16 var result this dataview getInt16 this index true this index 2 return result case Uint16 var result this dataview getUint16 this index true this index 2 return result case Int32 var result this dataview getInt32 this index true this index 4 return result case Uint32 var result this dataview getUint32 this index true this index 4 return result case Float case Float32 var result this dataview getFloat32 this index true this index 4 return result case Double case Float64 var result this dataview getFloat64 this index true this index 8 return result default throw new Error Unknown datatype this hasNext function return this index this size return this var cursor new ArrayBufferCursor arrayBuffer var nextValue nextValue cursor next Uint8 console log nextValue nextValue cursor next Uint8 console log nextValue nextValue cursor next Uint8 console log nextValue nextValue cursor next Uint8 console log nextValue nextValue cursor next Uint8 console log nextValue check here to see the detials of the png format https www w3 org TR PNG Structure html text PNG 20file 20signature text This 20signature 20indicates 20that 20the ending 20with 20an 20IEND 20chunk The first eight bytes of a PNG file always contain the following decimal values 137 80 78 71 13 10 26 10 console log ready Try out the above but on a downloaded fine download as binary but it contains text e g html file This time we ll go through each byte which is a text file convert the values to ascii const response await fetch https notebook xbdev net index php const arrayBuffer await response arrayBuffer var ArrayBufferCursor function arrayBuffer console log ArrayBufferCursor creation this dataview new DataView arrayBuffer 0 this size arrayBuffer byteLength this index 0 this next function type switch type case Uint8 var result this dataview getUint8 this index this index 1 return result case Int16 var result this dataview getInt16 this index true this index 2 return result case Uint16 var result this dataview getUint16 this index true this index 2 return result case Int32 var result this dataview getInt32 this index true this index 4 return result case Uint32 var result this dataview getUint32 this index true this index 4 return result case Float case Float32 var result this dataview getFloat32 this index true this index 4 return result case Double case Float64 var result this dataview getFloat64 this index true this index 8 return result default throw new Error Unknown datatype this hasNext function return this index this size return this var cursor new ArrayBufferCursor arrayBuffer var nv let out for let i 0 i 200 i if cursor hasNext break nv cursor next Uint8 console log nv console log String fromCharCode nv let char String fromCharCode nv out char console log out 200 bytes out console log ready
var result this dataview getUint32 this index true this index 4 return result case Float case Float32 var result this dataview getFloat32 this index true this index 4 return result case Double case Float64 var result this dataview getFloat64 this index true this index 8 return result default throw new Error Unknown datatype this hasNext function return this index this size return this var cursor new ArrayBufferCursor arrayBuffer var nextValue nextValue cursor next Uint8 console log nextValue nextValue cursor next Uint8 console log nextValue nextValue cursor next Uint8 console log nextValue nextValue cursor next Uint8 console log nextValue nextValue cursor next Uint8 console log nextValue check here to see the detials of the png format https www w3 org TR PNG Structure html text PNG 20file 20signature text This 20signature 20indicates 20that 20the ending 20with 20an 20IEND 20chunk The first eight bytes of a PNG file always contain the following decimal values 137 80 78 71 13 10 26 10 console log ready Try out the above but on a downloaded fine download as binary but it contains text e g html file This time we ll go through each byte which is a text file convert the values to ascii const response await fetch https notebook xbdev net index php const arrayBuffer await response arrayBuffer var ArrayBufferCursor function arrayBuffer console log ArrayBufferCursor creation this dataview new DataView arrayBuffer 0 this size arrayBuffer byteLength this index 0 this next function type switch type case Uint8 var result this dataview getUint8 this index this index 1 return result case Int16 var result this dataview getInt16 this index true this index 2 return result case Uint16 var result this dataview getUint16 this index true this index 2 return result case Int32 var result this dataview getInt32 this index true this index 4 return result case Uint32 var result this dataview getUint32 this index true this index 4 return result case Float case Float32 var result this dataview getFloat32 this index true this index 4 return result case Double case Float64 var result this dataview getFloat64 this index true this index 8 return result default throw new Error Unknown datatype this hasNext function return this index this size return this var cursor new ArrayBufferCursor arrayBuffer var nv let out for let i 0 i 200 i if cursor hasNext break nv cursor next Uint8 console log nv console log String fromCharCode nv let char String fromCharCode nv out char console log out 200 bytes out console log ready