Hoje, em 2023 e diante, temos métodos nativos em todos navegadores modernos, que comprimem e extraem, são os CompressionStream
e DecompressionStream
.
Segue as interfaces:
enum CompressionFormat {
"deflate",
"deflate-raw",
"gzip",
};
[Exposed=*]
interface CompressionStream {
constructor(CompressionFormat format);
};
CompressionStream includes GenericTransformStream;
[Exposed=*]
interface DecompressionStream {
constructor(CompressionFormat format);
};
DecompressionStream includes GenericTransformStream;
Formatos esperados (CompressionFormat)
Formato |
Descrição |
gzip |
Compacta o stream usando o formato GZIP |
deflate |
Compacta o stream usando o algoritmo DEFLATE no formato de dados compactados ZLIB. O formato ZLIB inclui um cabeçalho com informações sobre o método de compactação e o tamanho não compactado dos dados e uma soma de verificação final para verificar a integridade dos dados. |
deflate-raw |
Compacta o stream usando o algoritmo DEFLATE sem cabeçalho e soma de verificação final. |
Suporte a API Compression Streams
Navegadores Desktop suportados:
Chrome |
Edge |
Firefox |
Opera |
Safari |
80 |
80 |
113 |
67 |
16.4 |
Navegadores mobile suportados:
Chrome Android |
Firefox Android |
Opera Android |
Safari iOS |
Samsung Internet |
WebView Android |
80 |
113 |
57 |
16.4 |
13 |
80 |
Ambientes de execução JavaScript suportados:
Deno |
Node.js |
Bun |
1.19 |
18 (17 no Experimental, veja nota) |
Não (detalhes) |
Nota: Node.js v17 requer importar com require('stream/web')
(CommonJS) ou import * from 'stream/web'
(ESM)
Suporte ao deflat-raw
O suporte ao deflate-raw
em alguns navegadores e ambientes só foi implementado ou habilitado depois, portanto pode não estar disponivel dependendo da versão, Firefox e Safari foram os únicos que suportaram desde a primeira implementação, segue das versões dos navegadores e ambientes que passaram forneceram o suporte posteriormente:
Chrome |
Edge |
Opera |
Chrome Android |
Opera Android |
Samsung Internet |
WebView Android |
Deno |
103 |
103 |
89 |
103 |
57 |
13 |
103 |
1.23 |
Nota: Nenhuma versão do NodeJS suporta o formato deflate-raw
ainda
Usando CompressionStream e DecompressionStream
É necessário usar o método ReadableStream.pipeThrough()
para aplicar a transformação de CompressionStream
ou DecompressionStream
.
Você pode usar Blob.stream()
ou Response.body
para obter o ReadableStream
, e então compactar ou descompactar o objeto com .pipeThrough
.
(async () => {
const format = 'gzip';
const input = 'Á É Í Ó Ú á é í ó ú 1 2 3 👽 🤖 🎃 😺 😸 😹 😻';
console.log('Original:', input);
// Comprimir
const blob1 = new Blob([input]);
const stream1 = blob1.stream();
const transform1 = stream1.pipeThrough(new CompressionStream(format));
const result1 = await (new Response(transform1)).blob();
console.log('Comprimido:', await result1.text());
// Extrair
const blob2 = result1;
const stream2 = blob2.stream();
const transform2 = stream2.pipeThrough(new DecompressionStream(format));
const result2 = await (new Response(transform2)).blob();
console.log('Extraido:', await result2.text());
})();
O Response geralmente é usado com fetch API, mas podemos usar a interface Response
para manipular strings
(async () => {
const format = 'gzip';
const input = 'Á É Í Ó Ú á é í ó ú 1 2 3 👽 🤖 🎃 😺 😸 😹 😻';
console.log('Original:', input);
// Comprimir
const response1 = new Response(input);
const stream1 = response1.body;
const transform1 = stream1.pipeThrough(new CompressionStream(format));
const result1 = await (new Response(transform1)).blob();
console.log('Comprimido:', await result1.text());
// Extrair
const response2 = new Response(result1);
const stream2 = response2.body;
const transform2 = stream2.pipeThrough(new DecompressionStream(format));
const result2 = await (new Response(transform2)).blob();
console.log('Extraido:', await result2.text());
})();
A função fetch()
retorna um Response
, portanto usar o .body
para obter o stream, da mesma forma dos exemplos anteriores
// Comprimir
fetch('file.json')
.then((response) => response.body) // obtêm o stream
.then((stream) => stream.pipeThrough(new CompressionStream(format))) // prepara para comprimir
.then((transform) => new Respose(transform).blob()) // Obtêm comprimido (pode usar text(), mas é melhor trabalhar com blob)
.then((compressed) => console.log('Comprimido', compressed)); // comprimida
// Extrair
fetch('file.gz')
.then((response) => response.body) // obtêm o stream
.then((stream) => stream.pipeThrough(new DecompressionStream(format))) // prepara para comprimir
.then((transform) => new Respose(transform).text()) // Obtêm comprimido (pode usar blob)
.then((data) => console.log('Extaído', data)); // extraído
Compactando ou extraindo arquivos no <input type="file">
Ao usar o type=file
o evento ou o próprio input retornam a propriedade HTMLInputElement.files
(FileList
), cada item em .files
é um File
, o File
é uma interface estendida de Blob
, portanto é possível extrair ou comprimir ou usar outros transformStream, um exemplo prático:
document.getElementById('formato').addEventListener('change', async () => document.getElementById('arquivo').value = '');
document.getElementById('arquivo').addEventListener('change', async (event) => {
const files = event.target.files;
// Verifica se existe um arquivo selecionado
if (!files.length) return;
// Obtêm o stream do arquivo selecionado
const stream = files[0].stream();
const format = document.getElementById('formato').value;
const transformedStream = stream.pipeThrough(new CompressionStream(format));
// const transformedStream = stream.pipeThrough(new DecompressionStream(format));
// Apenas para exibição
console.log(await (new Response(transformedStream)).text());
});
<select id="formato">
<option>deflate</option>
<option>deflate-raw</option>
<option>gzip</option>
</select>
<input type="file" id="arquivo">