在网络上使用 GZIP 压缩十六进制字符串 (Javascript)

Question

我有一个文本区域，其中输入的值被转换为十六进制并连接起来，如下所示：

4f43 5441 1d00 0000 2400 0000 0004 0000
0200 0000 0000 0000 0000 0000 0000 0000
0200 0000 0206 0073 6b79 626f 780e 0073
6b79 626f 7865 732f 7768 6974 6502 0800
6d61 7074 6974 6c65 1900 4f47 5a20 4564
6974 6f72 2066 6972 7374 2065 7665 7220
6d61 7003 6670 7300 0000 0000 0500 0200
0400 0300 0500 0700 0000 0044 0000 0044
0000 0044 0000 0000 0000 00ff 0000 0500
0000 0544 0000 0544 0000 0044 6e00 3200
0000 0000 0000 0200 0207 0007 0007 0001
0001 0001 0000 0202 0003 0004 0005 0006
0007 0000 0202 0003 0004 0005 0006 0007
0000 0202 0003 0004 0005 0006 0007 0000
0200 0000 0000 0007 0000 0000 0000 0100
0000 0000 0000 0000 0000 0000 0100 0000
0000 0000 0000 0000 0000 0100 0000 0000
0000 0000 0000 0000

我的目标是使用 gzip "online"（即不使用 zlib 命令 line/nodejs）压缩此十六进制，并使用 blob 使输出可供下载。

这是我现在使用“PAKO”的尝试：

html

<script src="https://cdn.jsdelivr.net/pako/1.0.3/pako.min.js"></script>
<textarea id="input"></textarea>
<button onclick="toHex()">Convert to hex</button>
<a id="downloadbtn">Download as gzip</button>

javascript

var pako = window.pako;
function toHex(){
    input = document.getElementById("input").value;
    hexresult = input.split("").reduce((hex,c)=>hex+=c.charCodeAt(0).toString(16).padStart(2,"0"),"");

    gzipresult = pako.gzip(hexresult, { level: 6 });
    download(gzipresult);
}

function download(data){
    downloadbtn = document.getElementById("downloadbtn");
    var blob = new Blob([ data ], {type : "application/gzip",});

    if (window.navigator.msSaveBlob) {
        navigator.msSaveBlob(blob, "output.gz");
    } else {
        var csvUrl = URL.createObjectURL(blob);
        $('#downloadbtn').attr({
            'download': "output.gz",
            'href': csvUrl
        });
    };
}

但是 PAKO (gzip) 生成的输出与 zlib 生成的输出不匹配，它们不一样...

有没有办法让两者的输出完全相同？要么 如何使用 JavaScript 为 gzip 正确压缩十六进制字符串？

更新： @Blex 提到了 Buffer.from 的使用，我认为它是 nodejs 原生的东西（我在浏览器中需要它）所以我尝试了 this standalone script from this repo，但是生成的文件仍然相同（仍然不同来自 zlib)，但无论如何，我很感激你提供的帮助！

比较

输入：“68656c6c6f20776f726c6421”（世界您好！）

zlib 输出（mingw 命令行）： 1f8b 0800 4767 4c5e 0003 cb48 cdc9 c957 28cf 2fca 4951 0400 6dc2 b403 0c00 0000

pako 输出： 1f8b 0800 0000 0000 0003 33b3 3033 354b 06c2 3423 0373 73b3 3473 2320 dbc4 c810 00b2 2eed 2a18 0000 00

Answer 1

Edit: After writing this answer a little too fast, I noticed the outputs were not absolutely the same. There is a one byte difference, corresponding to the OS type header. zlib returns a, which represents TOPS-20, and Pako returns 3, which represents Unix.

zlib returns 一个缓冲区，pako returns 一个 Uint8Array。要获得缓冲区，您可以这样做：

gzipresult = pako.gzip(hexresult, { level: 6 });
gzipbuffer = Buffer.from(gzipresult);

这会给你~~与 zlib 完全~~类似的输出。这是一个简单的 NodeJS 脚本来测试和比较两者：

// Don't forget to `npm i -S pako`
const pako = require("pako");
const zlib = require("zlib");

const input = "Hello world!";
const hexStr = input.split("").reduce((hex,c)=>hex+=c.charCodeAt(0).toString(16).padStart(2,"0"),"");

zlib.gzip(hexStr, function(_, zlibResult) {
  const zlibHex = zlibResult.toString("hex");

  const pakoResult = pako.gzip(hexStr, { level: 6 });
  const pakoHex = Buffer.from(pakoResult).toString("hex");

  console.log("zlib", zlibHex);
  console.log("pako", pakoHex);
  console.log("Outputs are equal ===", zlibHex === pakoHex);
});


/*
Output:
pako 1f8b080000000000000333b13033354b06c23423037373b334732320dbc4c81000bde2d6f318000000
zlib 1f8b080000000000000a33b13033354b06c23423037373b334732320dbc4c81000bde2d6f318000000
                        ^
             actually not the same
Outputs are equal === false
*/

Answer 2

所以，事实证明，这整个混乱的发生是因为我的输入，除了纯文本外，还有几个 space 个字符（我放这些字符是为了更好地查看），这显然影响了结果转换为十六进制时...为了使其按我预期的方式工作，我只需要删除所有 space 字符，将其编码为十六进制，然后用 pako 压缩它。

var pako = window.pako;
function toHex(){
    input = document.getElementById("input").value.replace(/\s/g, "");
    hexresult = new Uint8Array(input.match(/.{2}/g).map(e => parseInt(e, 16)));

    gzipresult = pako.gzip(hexresult);
    download(gzipresult);
}

function download(data){
    downloadbtn = document.getElementById("downloadbtn");
    var blob = new Blob([ data ], {type : "application/octet-stream",});

    if (window.navigator.msSaveBlob) {
        navigator.msSaveBlob(blob, "output.gz");
    } else {
        var csvUrl = URL.createObjectURL(blob);
        $('#downloadbtn').attr({
            'download': "output.gz",
            'href': csvUrl
        })
    }
}

在网络上使用 GZIP 压缩十六进制字符串 (Javascript)

Compressing hexadecimal string using GZIP on the web (Javascript)

javascript

html

hex

gzip

zlib