如何< u8>在Nodejs中将Vec png响应从actix-web/rust转换为Buffer

epggiuax  于 2023-11-19  发布在  其他
关注(0)|答案(1)|浏览(119)

我有两个API可以相互通信,一个是用rust(actix-web)编写的,另一个是用node编写的。我的nodejs应用程序正在从actix API请求PNG。actix API响应是PNG图像的Vec表示。我无法成功使用actix的响应,因为我在将响应数据/主体转换为可用格式时遇到了麻烦。
在actix端的代码看起来像这样:

pub async fn handle_image<C: repository::C, M: repository::M>(
    c_repository: web::Data<C>,
    m_repository: web::Data<M>,
    input: web::Json<model::InputModel>,
) -> HttpResponse {
    images::generate_image(
        c_repository.get_ref(),
        m_repository.get_ref(),
        &input.into(),
    )
    .await
    .map(|result| match result {
        Result::Success(image) => {
            HttpResponse::Ok()
                .insert_header(ContentType::png())
                .body(image)
        },
        _ => HttpResponse::Unauthorized().finish(),
    })
    .unwrap_or_else(|_| HttpResponse::InternalServerError().finish())
}

字符串
图像是Vec<u8>类型,所有这些代码都按预期工作(我已经确认图像是从Rust端正确生成的)。
我的javascript(typescript)端代码目前看起来像这样:

export const getImage = async (imageDetails: ImageDetails) => {
    const fromHexString = (hexString: string) => {
      const b = (hexString.match(/.{1,2}/g) || []).map((byte) => parseInt(byte, 16));
      return Uint8Array.from(b);
    };

    const { data } = await imageService.geImage(imageDetails);
    console.log('from', fromHexString(data as string));
    console.log('uiint8array', Uint8Array.from(data as number[]));
    console.log('hex', Buffer.from(data as string, 'hex'));
    console.log('buffer', Buffer.from(data));
  }
};


我也试过使用blob。但是,我找不到任何有效的东西。没有一个结果数据被正确转换和可用。
返回的数据相当大,但这里是我在console.log()数据时看到的片段(在nodejs端)
'�PNG\r\n'+'\x1A\n'+'\x00\x00\x00\rIHDR\x00\x00\x00\x01�\x00\x00\x00\x01�\b\x00\x00\x00\x00\x00�%6\x00\x00\x1BVIDATx��$I�3\x1E��1�Z\x1EY]\x05;�\x0F~a\x07)2�|{�/a\x0F�%�!�=��\x12�_�\x1E�K�C~\t {�/a\x0F�%�!�=��\x12�_�\x1E�K�C~\t {�/a\x0F�%�!���}�w "�k\x1F�n�%�O�[�~�\x1E2�B��\fr�=�5n}-�\x1B {�O�[�~�\x1E2�S�B��\fr�=�o�!�k\x0F?5n}-�\x1B��zh�O�d�<} dN7�= z�<�AN7�= z�<�AN7�= z��<�AN7��= z��<�A��= z��<�AN7��= z��<�AN7�= z�t��n��&��不!
在发送响应之前,我还打印了actix发送的内容(actix代码示例中的"图像")。同样,我不会发布整个内容,但这里有一个片段:

[137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82, 0, 0, 1, 200, 0, 0, 1, 200, 8, 0, 0, 0, 0, 239, 202, 37, 54, 0, 0, 27, 86, 73, 68, 65, 84, 120, 156, 237, 209, 219, 170, 36, 73, 172, 164, 225, 217, 239, 255, 208, 51, 30, 204, 250, 160, 49, 202, 90, 30, 89, 93, 5, 59, 209, 15, 126, 97, 7, 41, 50, 209, 255,


我发这篇文章的原因是,我比较了我所有的尝试来解析来自actix的响应,它们都不匹配发送的内容。我希望有人能对如何实现这一点有一些见解,我一直在努力做到这一点。
请让我知道如果有任何更多的信息需要.提前感谢!
框架和环境
节点:20.9.0
14.0.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1
rust:1.73.0
actix-web:4.2.1
我遇到麻烦的一个例子是将响应中的图像转换为base64字符串。当我尝试运行Buffer.from(data).toString('base64')时,我得到了一个巨大的base64字符串,这里是一个片段(不是全部,它太长了)输出:
77 + 9UE5HDQoaCgAAAA1JSERSAAAB77 + 9AAAB77 + 9CAAAAADvv73vv70lNgAAG1ZJREFUeO +/ve +/ve +/vduqJ Envv73vv73vv73vv73vv73vv73vv70zHu +/ve +/ve +/vTHvv71aHlldBTvv70PfmEHKTv70@vv73vv73vv73vv73vv73vv718A3vv70vYQ/vv70l77 + 9Ie +/ve +/vT3kl7Dvv7@vv70S77 + 977 + 9X ++/vR7vv71L77 + 9Q34Je ++/vS9hD ++/vSXvv70h77 + 977 + 9PeSXsO +/ve +/vRLvv73vv71f77 + 9Hu +/vUvv71Dfgl777 + 9L2EP77 + 9Je +/vSHvv73vv777@95Jew77 + 977 + 9Eu +/ve +/vV/vv70e77 + 9S ++/vUN + CXvvv70vYQ/vv70l77 + 9Ie +/ve +/vT3kl7DvT3@73vv70S77 + 977 + 9X ++/vR7vv71LGA/vv70/77 + 9fcK0dyLvv71rH ++/vW7vv70l77 + 9 77 + 977 + 9T ++/vVvv71 + 77 + 977 + 977 + 9HjLIve +/ve +/vVPvv73Wp ++/vWLvv73vv73vv70Mcu +/vT3vv73UuO +/vem3mG/μ@v70h77 + 977 + 9aw8/NW5977 + 9Le +/vRt777 + 9IO +/ve +/ve +/vU/vv71b77 + 9fu +/ve +/ve +/vR4yyL3v v73vv71T77 + 91qfv71i77 + 977 + 977 + 9DHLv70977 + 91Ljv73pt5hv77 + 9Ie +/ve +/vWsPPzVufe +/vS3vv70b14fvv716aO +/vU/vv71k77 + 9PH1kTjfvv73vv73vv73vv709euK2v ++/vTzvv71BTjfvv73vv73vv73vv73vv709euK2v ++/vTzvv71BTjfvv73vv73vv73vv7 09euK2v ++/vTzvv71BTjfvv73vv73vv709euK2v ++/vTzvv71BTjfvv73vv71BT@vv73vv709euK2v ++/vTzvv71BTjfvv73vv73vv73vv709euK2v ++/vTzvv71BTjfvv73vv73vv73vv709euK2v ++/vTzvv71BTjfvv73vv73vv73vv709eu +/ve +/ve +/vXTvv73vv73vv71u77 + 977 + 9Ju +/vUnv.
(Note:当我试图显示此数据时,我确实添加了data:image/png;base64,前缀,这只是缓冲区本身的输出)
buffer本身看起来像这样:
<Buffer ef bf bd 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 01 ef bf bd 00 00 01 ef bf bd 08 00 00 00 00 ef bf bd ef bf bd 25 36 00 00 1b 56 49 44 41... 13398 more bytes>
这不是有效的图像数据,不会按预期显示在浏览器中。

rhfm7lfc

rhfm7lfc1#

我能够基于this stack overflow question解决这个问题。问题似乎是axios需要配置为具有arrayBuffer的响应类型,以便以我期望的形式返回数据。我的解决方案涉及添加arrayBuffer作为响应类型,如下所示:

axios.get('/image.png', { responseType: 'arraybuffer' })

字符串
现在我可以使用/操作图像数据。
我没有意识到axios要求我将响应类型指定为arraybuffer。对于缺乏关于axios配置和使用的信息表示歉意。

相关问题