12

Existe alguma maneira de compactar dados (strings) usando Javascript?

Estou desenvolvendo algo para uma plataforma onde não é possível fazer o uso de nenhuma linguagem servidor (ao menos no host deles) e não temos acesso ao banco de dados. Porém encontrei uma maneira de se salvar dados usando a própria plataforma, só que por vezes acabo ficando limitado pelo limite de 60.000 caracteres que eles infligem.

Por isso gostaria de saber se existe alguma maneira eficiente de se compactar dados usando apenas Javascript.

2 Respostas 2

13

A biblioteca lz-string parece uma boa opção para se compactar strings via JavaScript puro:

var string = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";

var compactada = LZString.compress(string);
var original = LZString.decompress(compactada);

// Níveis de compactação:
document.body.innerHTML += "Original: " + string.length + "<br/>";

var metodos = ["", "UTF16", "Base64", "EncodedURIComponent", "Uint8Array"];
for ( var i = 0 ; i < metodos.length ; i++ ) {
    var compactar = "compress" + ( metodos[i] ? "To" + metodos[i] : "" );
    var descompactar = "decompress" + ( metodos[i] ? "From" + metodos[i] : "" );
  
    var compactada = LZString[compactar](string);
    var original = LZString[descompactar](compactada);
    if ( original != string )
        alert("Erro ao descompactar!");

    var porcentagem = " (" + (compactada.length*100/string.length).toFixed(0) + "%)";
    document.body.innerHTML += compactar + ": " + compactada.length + porcentagem + "<br/>";
}
<script src="https://cdn.rawgit.com/pieroxy/lz-string/master/libs/lz-string.min.js"></script>

Apenas tome cuidado ao escolher o método correto de representar o resultado compactado, dependendo do que você vai fazer com ele.

  • O padrão compress é específico do WebKit (para salvar no local storage), não vai funcionar em outros ambientes - muito menos quando há um servidor envolvido;
  • A opção compressToUTF16 me parece a mais adequada, pois o resultado é uma string comum sem problemas de codificação (encoding). Entretanto, verifique o que o servidor vai fazer com essa string, pois se ele representá-la num formato menos compacto (UTF-8, ou talvez ASCII com caracteres Unicode "escapados") ela pode acabar ocupando mais espaço em vez de menos...
  • As opções que usam base64 são as mais "seguras" (pois o resultado é somente ASCII), mas o nível de compressão não é lá dos melhores...
  • Por fim, a que usa Uint8Array é boa, mas você vai ter que codificá-la (serializá-la) em algum formato antes de mandar pro servidor, a menos que este aceite dados binários.
1
  • Nossa realmente impressionante, ainda não tinha visto algo parecido +1
    – Syzoth
    Commented 29/12/2014 às 5:05
5

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.

Usando Blob

(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());
})();

Usando Response

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());
})();

Usando fetch API

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .