jDataView - A unique way to work with a binary file in JavaScript.jDataView provides a standard way to read and/or modify binary files in all the browsers. It follows the DataView Specification and even extends it for a more practical use.
There are three ways to read a binary file from the browser.
The first one is to download the file through XHR with charset=x-user-defined. You get the file as a String, convert it to byte Array and you have to rewrite all the decoding and encoding functions (getUint16, getFloat32, ...). All the browsers support this.
Then browsers that implemented Canvas also added CanvasPixelArray as part of ImageData. It is fast byte array that is created and used internally by <canvas /> element for manipulating low-level image data. We can create such host element and use it as factory for our own instances of this array.
Then browsers that implemented WebGL added ArrayBuffer. It is a plain buffer that can be read with views called TypedArrays (Int32Array, Float64Array, ...). You can use them to decode the file but this is not very handy. It has big drawback, it can't read non-aligned data (but we can actually hack that). So they replaced CanvasPixelArray with Uint8ClampedArray (same as Uint8Array, but cuts off numbers outside 0..255 range).
A new revision of the specification added DataViews. It is a view around your buffer that can read/write arbitrary data types directly through functions: getUint32, getFloat64 ...
And one way to read a binary file from the server.
jDataView provides the DataView API using the best available option between Arrays, TypedArrays, NodeJS Buffers and DataViews.
See the Typed Array Specification for a detailed API.
The wrapper satisfies all the specification getters:
And setters:
Addition of a littleEndian argument to the constructor. Big Endian will be the default mode of getters if their littleEndian value is undefined.
The byteOffset parameter is now optional. If you omit it, it will read right after the latest read offset. You can interact with the internal pointer with those two functions.
Also, specification DataView setters require byteOffset as first argument, and passing "undefined" for sequential writes can be not very convenient.
You can use writeXXX methods instead, which will set values at current position automatically:
Addition of Char, String and Bytes utilities. String operations globally support 'binary' (by default) and 'utf8' encodings; Char is always one-byte 'binary'.
Addition of 64-bit signed and unsigned integer types.
IMPORTANT: Those types behave like primitive numbers (you can manipulate with them using arithmetic operations, convert them to strings etc.)., BUT due to IEEE.754 limitations, there is precision loss for numbers outside the ±2^53 range, and that's why they also contain
lo and hi fields for retrieving corresponding 32-bit unsigned parts. You can pass both primitive numbers (with the same restriction as above) or jDataView.Uint64/jDataView.Int64 instances with lo and hi fields to writer functions as well.
Addition of bitfield support. Allows to use bitLength <= 32 bits. Don't forget to ensure byte padding before reading non-bitfield values after calling those methods.
Addition of wrapBuffer and createBuffer, utilities to easily create buffers with the latest available storage type (Node.js Buffer, ArrayBuffer, CanvasPixelArray or simple Array).
First we need a file. Either you get it through XHR or use the createBuffer utility.
var file = jDataView.createBuffer(
0x10, 0x01, 0x00, 0x00, // Int32 - 272
0x90, 0xcf, 0x1b, 0x47, // Float32 - 39887.5625
0, 0, 0, 0, 0, 0, 0, 0, // 8 blank bytes
0x4d, 0x44, 0x32, 0x30, // String - MD20
0x61 // Char - a
);
Now we use the DataView as defined in the specification, the only thing that changes is the j before jDataView.
var view = new jDataView(file);
var version = view.getInt32(0); // 272
var float = view.getFloat32(4); // 39887.5625
The wrapper extends the specification to make the DataView easier to use.
var view = new jDataView(file);
// A position counter is managed. Remove the argument to read right after the last read.
version = view.getInt32(); // 272
float = view.getFloat32(); // 39887.5625
// You can move around with tell(), seek() and skip()
view.skip(8);
// Two helpers: getChar and getString will make your life easier
var tag = view.getString(4); // MD20
var char = view.getChar(); // a
You can use a patched version of jQuery that supports ArrayBuffer for AJAX.
$.get(
'data.bin',
function (view) {
var tag = view.getString(4); // 'MD20'
var version = view.getUint32(); // 732
},
'dataview'
);
buffer, byteLength and byteOffset attributes.byteOffset and added more bound checks.littleEndian argument on getInt16.A simple tar viewer. It is a "Hello World" demo of how easy it is to use the library.
BMP viewer with ability to load files by URL or using File API, parsing them using library and rendering with Canvas (no <img /> elements at all).
A PhotoSynth WebGL Viewer by Visual Experiments. It uses jDataView to read the binary file and then WebGL to display it.
Please tell us if you made something with jDataView :)
FAQs
A unique way to work with a binary file in the browser and the server.
The npm package jdataview receives a total of 9,639 weekly downloads. As such, jdataview popularity was classified as popular.
We found that jdataview demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.
Security News
PyPI now allows maintainers to archive projects, improving security and helping users make informed decisions about their dependencies.
Research
Security News
Malicious npm package postcss-optimizer delivers BeaverTail malware, targeting developer systems; similarities to past campaigns suggest a North Korean connection.