Implementierung von Gzip in JavaScript

Shiv Yadav 15 Februar 2024
Implementierung von Gzip in JavaScript

Gzip ist ein weit verbreitetes Standardformat zur Archivierung einzelner Dateien. Es bietet einen Container zum Speichern von Dateien, die mit dem Komprimierungsalgorithmus Ihrer Wahl komprimiert wurden, den ursprünglichen Dateinamen, Zeitstempel und andere Dinge (wie optionale Kommentare), Standard-CRC usw.

In diesem Artikel wird die Verwendung von JavaScript zur Implementierung von Gzip vorgestellt.

Verwendung von den LZW-Komprimierungsalgorithmus zur Implementierung von Gzip in JavaScript

Die LZW-Komprimierung komprimiert Dateien mithilfe eines tabellenbasierten Suchalgorithmus, der von Abraham Lempel, Jacob Ziv und Terry Welch erfunden wurde, in kleinere Dateien.

Das gzip-js ist eine reine JavaScript-Implementierung des GZIP-Dateiformats.

HTML Quelltext:

<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-Code:

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

Der obige Code ist eine reine JavaScript-Implementierung und sollte nicht auf Servern für Produktionscode verwendet werden. Das Hauptziel ist es, dem Browser die GZIP-Komprimierung hinzuzufügen.

Ausgabe:

Wenn Sie den Code ausführen, sehen Sie die Ausgabe wie folgt.

gzip1

Wenn Sie auf die Schaltfläche Compress klicken, wird die Datei komprimiert und die Originalgröße und die komprimierte Größe angezeigt. Hier ist ein Beispiel für die Komprimierung (z. B. Zip-Datei).

gzip2

Es wird die Datei entpacken und die Originalausgabe anzeigen, wenn Sie auf die Schaltfläche Expand klicken.

gzip3

Autor: Shiv Yadav
Shiv Yadav avatar Shiv Yadav avatar

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.

LinkedIn