如何解压缩由 MS Sql 压缩的 JavaScript 中的图像

Question

我有一个包含两列的 SQL 表：

[filedata] [varbinary](max) NULL
[Compressed File Data] [varbinary](max) NULL

[压缩文件数据] 填充有COMPRESS([filedata])。我在[filedata] 中存储了一个图像字节数组。

我有一个反应组件：

import React from 'react';
import Config from 'config';
import { Gunzip, decompress } from 'zlib'
import "./Item.css";

class ItemList extends React.Component {
    constructor() {
        super();
        this.state = {
            name: 'React',
            apiData: [],
        };
    }

    async componentDidMount() {
        console.log('app mounted');
        /*global fetch */
        const tokenString = sessionStorage.getItem("token");
        const token = JSON.parse(tokenString);
        const encodedValue = encodeURIComponent(token.customerNumber);
        const response = await fetch(Config.apiUrl + `/api/Items?customerNumber=${encodedValue}`, {
            method: "GET",
            headers: {
                'Content-Type': "application/json",
                'Authorization': 'Bearer ' + token.token
            }
        });
        
        const json = await response.json();
        console.log(json);
        this.setState({ itemList: json.$values });        
    }

    //DecompressImage(compressedImage) {
    //    const buffer = Buffer.from(`${compressedImage}`, 'base64');
    //    Gunzip(buffer, (err, buffer) => {
    //        if (err) {
    //            console.error('An error occurred:', err);                
    //        }
    //        console.log(buffer.toString());
    //        return buffer;
    //    });
    //}

    DecompressImage(compressedImage) {
        console.log(compressedImage);
        var response = new Uint8Array(compressedImage);
        var compressed = response.subarray(0, response.byteLength - 4);
        var gunzip = new Gunzip(compressed);
        var decompress = gunzip.decompress();
        console.log(decompress)
        return decompress;
    }


    render() {
        const items = this.state.itemList;

        return (
            <table className="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>Item Number</th>
                        <th>Item Description</th>
                        <th>Item Image</th>
                    </tr>
                </thead>
                <tbody>
                    {items && items.map((item, index) =>
                        <tr key={index}>
                            <td>{item.itemNumber}</td>
                            <td>{item.itemDescription}</td>
                            <td><img className="fit-picture" src={"data:image/png;base64," + this.DecompressImage(item.imageData)} id={item.itemNumber + "Img"} alt={item.itemNumber} /></td>
                        </tr>
                    )}
                </tbody>
            </table>
        );
    }
}
export default ItemList;

对于我的生活，我无法让DecompressImage(compressedImage) 工作。这在我尝试使用压缩数据之前有效。注释的DecompressImage(compressedImage) 什么也不返回，也没有日志条目。第二个解压有错误，解压未定义。

我尝试过以下代码：nodejs 或这个stackoverflow 问题。

任何帮助将不胜感激。

nodejs 版本 14.17.1

Answer 1

首先，确保您将 Base64 字符串作为DecompressImage() 的输入。问题可能是当您需要 ArrayBuffer 或 Base64 字符串时，您得到的是十六进制字符串。网络上的十六进制字符串比未压缩的数据效率更低。如果您确定您实际上使用的是 JSON 中的 Base64 字符串，则将其转换为 Uint8Array 并解压缩。

既然您已确保您有一个 base64 输入，请注意 NPM zlib 库已过时，与 pako 或 fflate（我自己的库）等现代替代品相比，其性能非常低。由于fflate 比pako 更小更快，我将使用它来回答这个问题。以下是解压缩数据的方法：

// Install both fflate and base64-js for maximum speed
import * as b64 from 'base64-js';
import { gunzipSync } from 'fflate';
// This should replace DecompressImage
// Decompresses gzip + base64 to base64
function decompressToBase64(base64String) {
  const bytes = b64.toByteArray(base64String);
  const decompressed = gunzipSync(bytes);
  return b64.fromByteArray(decompressed);
}