JavaScript での Gzip の実装

Shiv Yadav 2024年2月15日

JavaScript JavaScript Gzip

Gzip は、個々のファイルをアーカイブするために広く使用されている標準形式です。選択した圧縮アルゴリズム、元のファイル名、タイムスタンプ、その他のもの（オプションのコメントなど）、デフォルトの CRC などで圧縮されたファイルを格納するためのコンテナーを提供します。

この記事では、JavaScript を使用して Gzip を実装する方法を紹介します。

JavaScript で `LZW` 圧縮アルゴリズムを使用して Gzip を実装する

LZW 圧縮は、Abraham Lempel、Jacob Ziv、および Terry Welch によって発明されたテーブルベースの検索アルゴリズムを使用して、ファイルをより小さなファイルに圧縮します。

gzip-js は、GZIP ファイル形式の純粋な JavaScript 実装です。

HTML コード：

<textarea id="rTxt" cols=100 rows=15>Fusce feugiat lacus quis felis consectetur, at placerat ipsum mollis. Suspendisse facilisis ligula diam. Sed eu neque a nisl porttitor dictum vitae eget nibh. Cras mollis lorem ac nisi dictum, et euismod mi ultricies. Donec ullamcorper eget neque non rutrum. Sed sem turpis, vehicula ut leo auctor, rutrum dignissim nisl. Curabitur vulputate metus semper, laoreet neque et, malesuada ligula. Aenean nec elementum tortor. Duis blandit ut ante a pulvinar. Phasellus id imperdiet mi.</textarea><br/>
<input type="button" id="doComp" value="Compress" /><span id="txtSize"></span>
<hr/>
<textarea id="cTxt" cols=100 rows=5></textarea>
<br/>
<input type="button" id="doUComp" value="Expand" /><span id="compSize"></span>
<hr/>
<textarea id="eTxt" cols=100 rows=5></textarea>

JavaScript コード：

function lzw_encode(s) {
  var dict = {};
  var data = (s + '').split('');
  var out = [];
  var currChar;
  var phrase = data[0];
  var code = 256;
  for (var i = 1; i < data.length; i++) {
    currChar = data[i];
    if (dict[phrase + currChar] != null) {
      phrase += currChar;
    } else {
      out.push(phrase.length > 1 ? dict[phrase] : phrase.charCodeAt(0));
      dict[phrase + currChar] = code;
      code++;
      phrase = currChar;
    }
  }
  out.push(phrase.length > 1 ? dict[phrase] : phrase.charCodeAt(0));
  for (var i = 0; i < out.length; i++) {
    out[i] = String.fromCharCode(out[i]);
  }
  return out.join('');
}

function lzw_decode(s) {
  var dict = {};
  var data = (s + '').split('');
  var currChar = data[0];
  var oldPhrase = currChar;
  var out = [currChar];
  var code = 256;
  var phrase;
  for (var i = 1; i < data.length; i++) {
    var currCode = data[i].charCodeAt(0);
    if (currCode < 256) {
      phrase = data[i];
    } else {
      phrase = dict[currCode] ? dict[currCode] : (oldPhrase + currChar);
    }
    out.push(phrase);
    currChar = phrase.charAt(0);
    dict[code] = oldPhrase + currChar;
    code++;
    oldPhrase = phrase;
  }
  return out.join('');
}

document.getElementById('doUComp').onclick = function() {
  compressedText = document.getElementById('cTxt').value;
  expandedText = lzw_decode(compressedText);
  document.getElementById('eTxt').value = expandedText;
} document.getElementById('doComp').onclick = function() {
  regularText = document.getElementById('rTxt').value;
  compressedText = lzw_encode(regularText);
  document.getElementById('cTxt').value = compressedText;
  document.getElementById('compSize').innerHTML =
      'Compressed Size :' + compressedText.length;
  document.getElementById('txtSize').innerHTML =
      'Original Size :' + regularText.length;
}

上記のコードは純粋な JavaScript 実装であり、本番コードのサーバーでは使用しないでください。主な目標は、ブラウザに GZIP 圧縮を追加することです。

出力：

コードを実行すると、次のような出力が表示されます。

gzip 1

Compress ボタンをクリックすると、ファイルが圧縮され、元のサイズと圧縮されたサイズが表示されます。圧縮の例を次に示します（つまり、Zip ファイル）。

gzip 2

Expand ボタンをクリックすると、ファイルが解凍され、元の出力が表示されます。

gzip 3

著者： Shiv Yadav

Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.

JavaScript で LZW 圧縮アルゴリズムを使用して Gzip を実装する

JavaScript で `LZW` 圧縮アルゴリズムを使用して Gzip を実装する