如何将 Actix-web/rust 中的 Vec<u8> png 响应转换为 Nodejs 中的缓冲区

Question

我有两个相互通信的 API，一个是用 rust (actix-web) 编写的，另一个是用 Node.js 编写的。我的 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（打字稿）方面的代码目前看起来像这样：

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));
  }
};

我也尝试过使用斑点。然而，我还没有找到任何有效的东西。结果数据均未正确转换且可用。

返回的数据相当大，但这是我在

console.log()

数据（在nodejs端）时看到的片段

'�PNG ' + '\x1A ' + '\x00\x00\x00 IHDR\x00\x00\x01�\x00\x00\x01� \x00\x00\x00\x00��%6\x00\x00\x1BVIDATx����$I�������3\x1E ���1�Z\x1EY]\x05;�\x0F~a\x07)2������|\x03{�/a\x0F�%��!��=䗰��\x12�� _�\x1E�K�C~ {�/a\x0F�%�!��=䗰��\x12��_�\x1E�K�C~ {�/a\x0F�%�!�� =䗰��\x12��_1E�K�C~ {�/a\x0F�%�!��=䗰��\x12��_�\x1E�K\x18\x0F�?�}´w "�k\x1F�n�%���O�[�~���\x1E2�S�֧�b��� r�=����鷘o�!��k\x0F?5n} �-�\x1B{� ���O�[�~���\x1E2�S�֧�b��� r�=����鷘o�!��k\x0F?5n}�-�\x1Bׇ�zh�O �d�<}dN7����=z⶿�<�AN7����=z⶿�<�AN7����=z⶿�<�AN7����=z⶿�<�A���=z⶿�<�AN7����=z⶿�<�AN7����=z⶿�<�AN7����=z����t���n��&�I���\x1E��LJ��:ɜn�!��\x1E��LJ��:ɜn�!��\x1E��LJ��:ɜn�!��\x1E��LJ��:ɜn�!��\x1E��LJ��:ɜn�!��\x1E��LJ��:ɜn�!��\x1E��LJ��:ɜ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

nextjs：14.0.1

铁锈：1.73.0

actix-web：4.2.1

我遇到问题的一个例子是将响应中的图像转换为 base64 字符串。当我尝试运行

Buffer.from(data).toString('base64')

时，我得到一个巨大的 base64 字符串，这是一个片段（不是全部，它太长）输出：

77+9UE5HDQoaCgAAAA1JSERSAAAB77+9AAAB77+9CAAAAADvv73vv70lNgAAG1ZJREFUeO+/ve+/ve+/vduqJEnvv73vv73vv73vv73vv73vv73vv70zHu+/ve+/ve+/vTHvv71aHlldBTvvv70 PfmEHKTLvv73vv73vv73vv73vv73vv718A3vvv70vYQ/vv70l77+9Ie+/ve+/vT3kl7Dvv73vv70S77+977+9X++/vR7vv71L77+9Q34Je++/vS9hD++/vSXvv70h77+97 7+9PeSXsO+/ve+/vRLvv73vv71f77+9Hu+ /vUvvv71Dfgl777+9L2EP77+9Je+/vSHvv73vv7095Jew77+977+9Eu+/ve+/vV/vv70e77+9S++/vUN+CXvvv70vYQ/vv70l77+9Ie+/ve+/vT3kl7Dvv73vv70S77+97 7+9X++/vR7vv71LGA/vv70/77+9fcK0dyLvv71rH++/vW7vv70l77+977+977 +9T++/vVvvv71+77+977+977+9HjLIve+/ve+/vVPvv73Wp++/vWLvv73vv73vv70Mcu+/vT3vv73UuO+/vem3mG/vv70h77+977+9aw8/NW5977+9Le+/vRt777+9IO+/ve+/ ve+/vU/vv71b77+9fu+/ve+/ve+ /vR4yyL3vv73vv71T77+91qfvv71i77+977+977+9DHLvv70977+91Ljvv73pt5hv77+9Ie+/ve+/vWsPPzVufe+/vS3vv70b14fvv716aO+/vU/vv71k77+9PH1kTjf vv73vv73vv73vv709euK2v++/vTzvv71BTjfvv73vv73vv73vv709euK2v++/vTzvv71BTjfvv73vv73vv73vv709euK2v++/vTzvv71BTjfvv73vv73vv73vv709euK2v++/v Tzvv71BTjfvv73vv73vv73vv709euK2v++/vTzvv71BTjfvv73vv73vv73vv709euK2v++/vTzvv71BTjfvv73vv73vv73vv709euK2v++/vTzvv71BTjfvv73vv73vv73vv7 09eu+/ve+/ve+/ve+/vXTvv73vv73vv71u77+977 +9Ju+/vUnv...

（注意：当我尝试显示此数据时，我添加了

data:image/png;base64,

前缀，这只是缓冲区本身的输出）

缓冲区本身看起来像这样：

这不是有效的图像数据，不会按预期显示在浏览器中。

Answer 1

我能够根据这个堆栈溢出问题解决该问题。问题似乎在于 axios 需要配置为

arrayBuffer

的响应类型，以便数据以我期望的形式返回。我的解决方案涉及添加

arrayBuffer

作为响应类型，如下所示：

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

现在我可以使用/操作图像数据了。

我没有意识到 axios 要求我将响应类型指定为

arraybuffer

。对于缺乏 axios 配置和使用的信息表示歉意。