将图像显示为 Uint8Array答案

【问题标题】：Display Image as Uint8Array将图像显示为 Uint8Array
【发布时间】：2020-12-23 18:12:03
【问题描述】：

我知道这个问题已经有了一些回答，但其中一个很清楚。

我有以下数组：

Uint8Array[112, 135, 57, 112, 135, 56, 109, 133, 58, 109, 131, 55, 108, 130, 53, 106, 127, 54, 102, 123, 51, 102, 122, 54, 103, 121, 55, 102, 121, 53, 100, 119, 53, ...]

有 19000 个元素（它是从 numpy 展平的 rgb 图像）

我有一个 react 应用，它有：

现在的问题是如何在不将其转换为 base64 的情况下填充此图像。我尝试了很多方法，例如：

const data = new Uint8Array(image[0].image);
const blob = new Blob([data], { type: "image/png" });
const imageUrl = URL.createObjectURL(blob);

将 imageUrl 设置为 src= 不起作用，我正在查看 image-js 库但我需要一些帮助

【问题讨论】：

标签： javascript reactjs image uint8array

【解决方案1】：

我最终在后端这样做：

image = Image.fromarray(img_uint8)
img_byte_arr = io.BytesIO()
image.save(img_byte_arr, format='JPEG')
img_byte_arr = img_byte_arr.getvalue()
b64_str_img = base64.b64encode(img_byte_arr).decode()

在前端我做了：

<img src={"data:image/jpeg;base64,".concat(`b64_str_img`)} width="512px"></img>

【讨论】：