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

Question

我有一个 SQL table 有两列：

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

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

中

我有一个 React 组件：

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) returns 什么都没有，也没有日志条目。第二个解压报错decompress is undeigned.

我试过来自nodejs or this Whosebug问题的代码。

如有任何帮助，我们将不胜感激。

nodejs 版本 14.17.1

Answer 1

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

既然您已确保拥有 base64 输入，请注意 NPM zlib 库已过时，与 pako or 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);
}

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

How to decompress image in JavaScript that was compressed by MS Sql

javascript

zlib

reactjs.net