I'm using a websocket to send a Jpeg image in blob form. I've pressed (gzipped) the blob but I'm unable to find a way to depress it using JavaScript. Does anyone know how?

This is the code I'm using to read the blob and then convert it into a base64 string:

var r = new FileReader();

r.onload = function(){
    draw(btoa(r.result));
};
r.readAsBinaryString(e.data);

The draw() function basically draws the image using the base64 string, onto a HTML5 canvas.

I've found this library to inflate strings, but it doesn't support blobs. (As far as I know / have tested) If anyone knows of a way, I would appriciate it. :) Thanks!

I'm using a websocket to send a Jpeg image in blob form. I've pressed (gzipped) the blob but I'm unable to find a way to depress it using JavaScript. Does anyone know how?

This is the code I'm using to read the blob and then convert it into a base64 string:

var r = new FileReader();

r.onload = function(){
    draw(btoa(r.result));
};
r.readAsBinaryString(e.data);

The draw() function basically draws the image using the base64 string, onto a HTML5 canvas.

I've found this library to inflate strings, but it doesn't support blobs. (As far as I know / have tested) If anyone knows of a way, I would appriciate it. :) Thanks!

• javascript
• pression
• blob
• inflate

Share Improve this question Follow edited Jan 13, 2013 at 22:26 Joey Morani asked Jan 13, 2013 at 22:14 Joey MoraniJoey Morani 26.6k3333 gold badges8989 silver badges132132 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

I've done a very similar thing for my particle system editor, it has support for reading Cocos2D plist files. In the plist file is texture data, which is a png that has been pressed with gzip and then converted to base64. Here is how I do it:

var input = 'byu9g1RZpINUpVtoKoiKIqJYoris...'; // really long string

// from base64 to ascii binary string
var decodedAsString = atob(input);

// ascii string to bytes in gzipped format
var data = this._binaryStringToArray(decodedAsString);

// raw, unpressed, binary image data into an array using gzip.js
var unpressed = require('gzip-js').unzip(data);

// now take the raw unpressed png and convert it
// back to base64 to use it as a data url
var asString = this._arrayToBinaryString(unpressed);
var encodedForDataUrl = btoa(asString);

var img = new Image();
img.src = encodedForDataUrl;

I am using gzip.js to do the heavy lifting. You can see all this in action here, you can get some plists to load into it here. BoilingFoam.plist will work, just load it in the "Import/Export" section.

In the above code I call two methods, here they are:

 _binaryStringToArray: function(binaryString) {
        var data = [];

        for (var i = 0; i < binaryString.length; ++i) {
            data[i] = binaryString.charCodeAt(i);
        }

        return data;
    },

    _arrayToBinaryString: function(array) {
        var str = '';
        for (var i = 0; i < array.length; ++i) {
            str += String.fromCharCode(array[i]);
        }
        return str;
    },

The whole shebang is here

Get a byteArray and you can decode it using pako: http://jsfiddle/9yH7M/