web-dev-qa-db-ja.com

JavaScriptでgzipおよびzlib文字列を解凍します

Tmxファイルからレイヤーデータを圧縮したいのですが。 javascriptでgzipとzlib文字列を解凍するためのライブラリを知っているのは誰ですか？ zlib を試してみましたが、うまくいきません。例、tmxファイルのレイヤーデータは次のとおりです。

  <data encoding="base64" compression="zlib">
       eJztwTEBAAAAwqD1T20JT6AAAHgaCWAAAQ==
  </data>

私のjavascriptコードは

var base64Data = "eJztwTEBAAAAwqD1T20JT6AAAHgaCWAAAQ==";
var compressData = atob(base64Data);
var inflate = new Zlib.Inflate(compressData);
var output = inflate.decompress();

「サポートされていない圧縮方法」というエラーメッセージが表示されて実行されます。しかし、私は http://i-tools.org/gzip としてオンラインツールで解凍してみて、正しい文字列を返します。

javascriptgzipzlibcompressiontmx
21
Toan Nguyen

zlib で問題を解決できます。以下のようにコードを修正します

var base64Data = "eJztwTEBAAAAwqD1T20JT6AAAHgaCWAAAQ==";
var compressData = atob(base64Data);
var compressData = compressData.split('').map(function(e) {
    return e.charCodeAt(0);
});
var inflate = new Zlib.Inflate(compressData);
var output = inflate.decompress();
9
Toan Nguyen

Pako は完全かつ最新のZlibポートです。

これは非常に単純な例で、そこから作業できます。

pako.js を取得すると、byteArrayを次のように解凍できます。

<html>
<head>
  <title>Gunzipping binary gzipped string</title>
  <script type="text/javascript" src="pako.js"></script>
  <script type="text/javascript">

    // Get datastream as Array, for example:
    var charData    = [31,139,8,0,0,0,0,0,0,3,5,193,219,13,0,16,16,4,192,86,214,151,102,52,33,110,35,66,108,226,60,218,55,147,164,238,24,173,19,143,241,18,85,27,58,203,57,46,29,25,198,34,163,193,247,106,179,134,15,50,167,173,148,48,0,0,0];

    // Turn number array into byte-array
    var binData     = new Uint8Array(charData);

    // Pako magic
    var data        = pako.inflate(binData);

    // Convert gunzipped byteArray back to ascii string:
    var strData     = String.fromCharCode.apply(null, new Uint16Array(data));

    // Output to console
    console.log(strData);

  </script>
</head>
<body>
    Open up the developer console.
</body>
</html>

実行例： http://jsfiddle.net/9yH7M/

あるいは、JSONまたはXMLとして送信する場合、配列は多くのオーバーヘッドを占有するため、送信する前に配列をbase64エンコードできます。同様にデコード：

// Get some base64 encoded binary data from the server. Imagine we got this:
var b64Data     = 'H4sIAAAAAAAAAwXB2w0AEBAEwFbWl2Y0IW4jQmziPNo3k6TuGK0Tj/ESVRs6yzkuHRnGIqPB92qzhg8yp62UMAAAAA==';

// Decode base64 (convert ascii to binary)
var strData     = atob(b64Data);

// Convert binary string to character-number array
var charData    = strData.split('').map(function(x){return x.charCodeAt(0);});

// Turn number array into byte-array
var binData     = new Uint8Array(charData);

// Pako magic
var data        = pako.inflate(binData);

// Convert gunzipped byteArray back to ascii string:
var strData     = String.fromCharCode.apply(null, new Uint16Array(data));

// Output to console
console.log(strData);

実行例： http://jsfiddle.net/9yH7M/1/

より高度に進むために、ここに pako AP​​Iドキュメント があります。

26
Redsandro

Ruby on Railsを使用し、圧縮されたエンコード済みデータをブラウザーに送信し、ブラウザーでJavascriptを介して圧縮解除したい場合は、上記の優れた答えを次のソリューションにまとめました。 Railsアプリケーションコントローラーのサーバーコードで、@ variableを介してブラウザーに送信する前に文字列を圧縮およびエンコードします。 。html.erbファイル：

require 'zlib'
require 'base64'

    def compressor (some_string)
        Base64.encode64(Zlib::Deflate.deflate(some_string))
    end

Pako.min.jsを使用するJavascript関数は次のとおりです。

function uncompress(input_field){
    base64data = document.getElementById(input_field).innerText;
    compressData = atob(base64data);
    compressData = compressData.split('').map(function(e) {
        return e.charCodeAt(0);
    });
    binData = new Uint8Array(compressData);
    data = pako.inflate(binData);
    return String.fromCharCode.apply(null, new Uint16Array(data));
}

非圧縮関数のJavaScript呼び出しは次のとおりです。この関数は、非表示のHTMLフィールド内に格納されているデータのエンコードと圧縮解除を行います。

my_answer = uncompress('my_hidden_field');

Railsapplication.js）ファイルのエントリは、pakoです。 min.js、/ vendor/assets/javascriptsディレクトリにあります：

//= require pako.min

そして、ここからpako.min.jsファイルを取得しました：

https://github.com/nodeca/pako/tree/master/dist

とにかく、すべてが私の終わりで動作します！ :-)

4
Andy Duncan