Implementación de Gzip en JavaScript

Shiv Yadav 15 febrero 2024
Implementación de Gzip en JavaScript

Gzip es un formato estándar ampliamente utilizado para archivar archivos individuales. Proporciona un contenedor para almacenar archivos comprimidos con el algoritmo de compresión de su elección, el nombre del archivo original, marcas de tiempo y otras cosas (como comentarios opcionales), CRC predeterminado, etc.

Este artículo presentará cómo usar JavaScript para implementar Gzip.

Utilice el algoritmo de compresión LZW para implementar Gzip en JavaScript

La compresión LZW comprime archivos en archivos más pequeños mediante un algoritmo de búsqueda basado en tablas inventado por Abraham Lempel, Jacob Ziv y Terry Welch.

El gzip-js es una implementación de JavaScript puro del formato de archivo GZIP.

Código 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>

Código 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;
}

El código anterior es una implementación de JavaScript puro y no debe usarse en servidores para código de producción. El objetivo principal es agregar compresión GZIP al navegador.

Producción:

Cuando ejecute el código, verá el resultado como este.

gzip 1

Cuando haga clic en el botón Compress, comprimirá el archivo y mostrará el tamaño original y el tamaño comprimido. Aquí hay un ejemplo de la compresión (es decir, archivo Zip).

gzip 2

Descomprimirá el archivo y dará la salida original al hacer clic en el botón Expand.

gzip 3

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