Writing Byte Array To Binary File Javascript

javascript binaryfiles binary-data

19,090

The Blob constructor does expect an array of typed arrays to be concatenated, but you are passing only a single Uint8Array into it. This will probably be interpreted as (should I say, "casted to"?) an array of DOM-strings - that's where your numbers are coming from.

A quickfix would be to use

new Blob([randomData], {type: "application/octet-stream"})
//       ^          ^

but I would suggest to either do

var randomData = [];
// while randomData.length < 308
    var bytes = new Uint8Array(4);
    for (var i=4; i--; ) {
        bytes[i] = longRandomNumber & (255);
        longRandomNumber = longRandomNumber >> 8
    }
    randomData.push(bytes);

var blob = new Blob(randomData, {type: "application/octet-stream"});

or not use those 4-byte bytes arrays at all:

var randomData = new Uint8Array(1232),
    count = 0;
// while count < randomData.length
    for (var i=4; i--; ) {
        randomData[count++] = longRandomNumber & (255);
        longRandomNumber = longRandomNumber >> 8
    }

var blob = new Blob([randomData], {type: "application/octet-stream"});

19,090

Author by

Ahmad Hajjar

I am a passionate engineer, who loves technology, a photography hobbyist, and a self learning person, who believes that learning is a life-long ongoing process. I love to work in technology, in environment that values innovation and appreciates diversity, with open minded people, who are willing to share and discuss all kinds of stuff. If you have any thoughts or questions in mind please, get in touch :) [email protected] My E-Card My blog

Updated on June 24, 2022

Comments

Ahmad Hajjar almost 2 years

I am trying to write a script that generates random numbers these number then are converted to groups of 4Bytes each then these 4-bytes-groups are put into an Uint8Array finally I try to save the array to binary file. Here is my code:

<html>
<head>
<title>Raandom Number Generator</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="filesaver.min.js"></script>
<script type="text/javascript">
    $(function() {
        if (!Date.now) {
            Date.now = function() {
                return new Date().getTime();
            };
        }

        alert("started");
        var currentMousePos = {
            x : -1,
            y : -1
        };
        var randomData = [];
        var bytes = new Int8Array(4);

        $(document).mousemove(function(event) {

            if(randomData.length>=1231){
                $(document).unbind('mousemove');
                console.log("Finished generating numbers ... trying to save file");
                randomData = new Uint8Array(randomData);
                var blob = new Blob(randomData, {type: "application/octet-stream"});
                saveAs(blob, "rand.bin");
                return;
            }
            currentMousePos.x = event.pageX;
            currentMousePos.y = event.pageY;
            var longRandomNumber = Date.now() * (event.pageX + 1)
                    * (event.pageY + 1);
            for ( var i = 3; i >= 0; i--) {
                bytes[i] = longRandomNumber & (255);
                longRandomNumber = longRandomNumber >> 8
            }
            for ( var i = 0; i < 4; i++) {
                randomData.push(bytes[i]);
            }
            console.log(randomData.length);
        });
    })
</script>
</body>
</html>

The problem is that the generated file contains numbers plain numbers for example an element in the Uint8Array may be 65, in my understanding to binary this value should be saved as capital letter A but it is stored as 65 instead

Note

filesaver.min.js is a library that I use to save files from JS (Link on GitHub)