How to Implement Gzip in JavaScript
Gzip is a widely used standard format for archiving individual files. It provides a container to store files compressed with the compression algorithm of your choice, the original file name, timestamps, and other stuff (such as optional comments), default CRC, etc.
This article will introduce how to use JavaScript to implement Gzip.
Use the LZW Compression Algorithm to Implement Gzip in JavaScript
LZW compression compresses files into smaller files using a table-based search algorithm invented by Abraham Lempel, Jacob Ziv, and Terry Welch.
The gzip-js is a pure JavaScript implementation of the GZIP file format.
HTML code:
<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;
}
The code above is a pure JavaScript implementation and should not be used on servers for production code. The main goal is to add GZIP compression to the browser.
Output:
When you run the code, you will see the output like this.
When you click on the Compress button, it will compress the file and show the original size and compressed size. Here is an example of the compression (i.e., Zip file).
It will unzip the file and give the original output when clicking the Expand button.
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