使用 JavaScript 膨胀 blob？答案

【问题标题】：Using JavaScript to inflate a blob?使用 JavaScript 膨胀 blob？
【发布时间】：2013-01-13 22:14:17
【问题描述】：

我正在使用 websocket 以 blob 形式发送 Jpeg 图像。我已经压缩（gzipped）了 blob，但我找不到使用 JavaScript 解压缩它的方法。有谁知道怎么做？

这是我用来读取 blob 并将其转换为 base64 字符串的代码：

var r = new FileReader();

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

draw() 函数基本上使用 base64 字符串将图像绘制到 HTML5 画布上。

我发现 this library 可以为字符串充气，但它不支持 blob。（据我所知/已经测试过）如果有人知道一种方法，我会很高兴的。 :) 谢谢！

【问题讨论】：

标签： javascript compression blob inflate

【解决方案1】：

我为我的particle system editor 做了一个非常相似的事情，它支持读取 Cocos2D plist 文件。 plist文件中是纹理数据，这是一个用gzip压缩然后转换为base64的png。这是我的做法：

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, uncompressed, binary image data into an array using gzip.js
var uncompressed = require('gzip-js').unzip(data);

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

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

我正在使用gzip.js 来完成繁重的工作。你可以看到这一切在行动here，你可以得到一些 plist 加载到它here。 BoilingFoam.plist 将起作用，只需将其加载到“导入/导出”部分即可。

在上面的代码中我调用了两个方法，这里分别是：

 _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;
    },

整个shebang是here

【讨论】：

谢谢！我看到它使用了 require() 那么这是否意味着我需要使用 node.js？
它使用的是RequireJS，它是用于浏览器的。 gzip.js 很难上手。您可能会在此处获取我构建的版本：github.com/city41/particle.js/blob/plist/public/javascripts/…，然后只需执行requiregzip('gzip-js').unzip(...) 即可使用它。
哇，这真的很好用！谢谢马特。希望我能给你更多的赞成票。 :P 再次感谢！
很高兴它有帮助！我花了一点时间才弄清楚工作流程，很高兴看到它也能帮助其他人。

【解决方案2】：

获取一个byteArray，你可以使用pako解码它：http://jsfiddle.net/9yH7M/

【讨论】：

感谢您对我为什么被否决的建设性评论。