Compress & Decompress An ArrayBuffer Client Side in JS

#javascript #webdev #typescript

The Compressions Streams API is new and up and coming way to compress and decompress data in the browser. Please note the support for the API is not very wide so use at your own risk.

I am writing this because I did not find any good examples of just compressing/decompressing an ArrayBuffer which is what I needed the API to do. The following two code snippets show how to do exactly that.

Compress An Array Buffer

const compressArrayBuffer = async (input: ArrayBuffer) => {
  //create the stream
  const cs = new CompressionStream("gzip");
  //create the writer
  const writer = cs.writable.getWriter();
  //write the buffer to the writer 
  writer.write(input);
  writer.close();
  //create the output 
  const output: Uint8Array[] = [];
  const reader = cs.readable.getReader();
  let totalSize = 0;
  //go through each chunk and add it to the output
  while (true) {
    const { value, done } = await reader.read();
    if (done) break;
    output.push(value);
    totalSize += value.byteLength;
  }
  const concatenated = new Uint8Array(totalSize);
  let offset = 0;
  //finally build the compressed array and return it 
  for (const array of output) {
    concatenated.set(array, offset);
    offset += array.byteLength;
  }
  return concatenated;
};

Deeompress An Array Buffer

const  decompressArrayBuffer = async (input: ArrayBuffer): Promise<Uint8Array> =>{
  //create the stream
  const ds = new DecompressionStream("gzip");
  //create the writer
  const writer = ds.writable.getWriter();
  //write the buffer to the writer thus decompressing it 
  writer.write(input);
  writer.close();
  //create the output
  const output: Uint8Array[] = [];
  //create the reader
  const reader = ds.readable.getReader();
  let totalSize = 0;
  //go through each chunk and add it to the output
  while (true) {
   const { value, done } = await reader.read();
   if (done) break;
   output.push(value);
   totalSize += value.byteLength;
  }
  const concatenated = new Uint8Array(totalSize);
  let offset = 0;
  //finally build the compressed array and return it 
  for (const array of output) {
   concatenated.set(array, offset);
   offset += array.byteLength;
  }
  return concatenated;
 }

Top comments (4)

A Sh • Jul 5 '23

This can be simplified:

const ds = new DecompressionStream("gzip");
const writer = ds.writable.getWriter();
writer.write(input);
writer.close();
return new Response(ds.readable).arrayBuffer();

Tommy • Feb 27

This can be simplified some more: stackoverflow.com/a/75793593/452587

Luis Angel Ortega • Oct 19 '23

This is great! Just what I needed, thanks for sharing!

Luis Angel Ortega • Oct 19 '23

The code I ended up with:

const decompressBlob = async (blob) => {
    const ds = new DecompressionStream("gzip");
    const decompressedStream = blob.stream().pipeThrough(ds);
    const arrayBuffer = await new Response(decompressedStream).arrayBuffer();
    const int8Array = new Int8Array(arrayBuffer); 
    return Array.from(int8Array);
}

DEV Community

Compress & Decompress An ArrayBuffer Client Side in JS

Compress An Array Buffer

Deeompress An Array Buffer

Top comments (4)

Read next

Top 10 Web Development Trends for 2025: Shaping the Future of the Internet!

Revolutionizing Payments: The WhiteBIT Crypto Card in Action

The Importance of Minimizing Database Queries in Backend Development

Print Queue