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

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

我有一个包含两列的 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

解决方法

首先，确保您获得的是 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);
}