使用JavaScript使Blob膨胀？ [英] Using JavaScript to inflate a blob?

问题描述

我正在使用网络套接字以Blob格式发送Jpeg图片。我已经压缩（压缩）了Blob，但是找不到使用JavaScript解压缩Blob的方法。有人知道吗？

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

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

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);

draw（）函数基本上绘制了图像使用base64字符串，并粘贴到HTML5画布上。

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

我发现此库可为字符串充气，但它不支持Blob。 （据我所知/已经测试过）如果有人知道一种方法，我会推荐。 :)谢谢！

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!

推荐答案

我为我的粒子系统编辑器，它支持读取Cocos2D plist文件。 plist文件中包含纹理数据，它是已用gzip压缩然后转换为base64的png。我的操作方法如下：

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 compressed 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, 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 完成繁重的工作。您可以在此处看到所有这些，您可以将其中的内容载入其中此处。 BoilingFoam.plist将起作用，只需在导入/导出部分中加载它即可。

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

整个shebang是此处

The whole shebang is here

这篇关于使用JavaScript使Blob膨胀？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！