Implémentation de Gzip en JavaScript

Shiv Yadav 15 février 2024
Implémentation de Gzip en JavaScript

Gzip est un format standard largement utilisé pour l’archivage de fichiers individuels. Il fournit un conteneur pour stocker les fichiers compressés avec l’algorithme de compression de votre choix, le nom du fichier d’origine, les horodatages et d’autres éléments (tels que des commentaires facultatifs), le CRC par défaut, etc.

Cet article présentera comment utiliser JavaScript pour implémenter Gzip.

Utiliser l’algorithme de compression LZW pour implémenter Gzip en JavaScript

La compression LZW compresse les fichiers en fichiers plus petits à l’aide d’un algorithme de recherche basé sur des tables inventé par Abraham Lempel, Jacob Ziv et Terry Welch.

Le gzip-js est une implémentation JavaScript pure du format de fichier GZIP.

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

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

Le code ci-dessus est une implémentation JavaScript pure et ne doit pas être utilisé sur des serveurs pour le code de production. L’objectif principal est d’ajouter la compression GZIP au navigateur.

Production :

Lorsque vous exécutez le code, vous verrez la sortie comme celle-ci.

gzip 1

Lorsque vous cliquez sur le bouton Compress, il compressera le fichier et affichera la taille d’origine et la taille compressée. Voici un exemple de compression (c’est-à-dire un fichier Zip).

gzip 2

Il décompressera le fichier et donnera la sortie originale en cliquant sur le bouton Expand.

gzip 3

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