时间戳

首页 > 解决方案 > 如何将返回的数据 ASCII 显示为图像？

javascript - 如何将返回的数据 ASCII 显示为图像？

问题描述

有谁知道这是什么？

base64/二进制/十六进制？？

这是一个图像数据，但我不知道如何显示它。

在此处输入图像描述

省略此字符串，因为它是手动添加的：data:image/png; base64,

标签： javascripthtmlimageuri

解决方案

尝试使用 JavaScript 的图像对象。像这样：

let base64Img = new Image();
base64Img.src = "data:image/png;base64,*rest of data here*...";

然后您可以将该图像对象放入您的 HTML 中，如下所示：

document.querySelector(*yourCSSselector*).appendChild(base64Img);

编辑：您说它不起作用，所以我对其进行了更多研究。

我对这张图片进行了编码：https ://i.picsum.photos/id/78/536/354.jpg

使用https://www.base64-image.de/上的工具

然后我制作了一个 codepen 以在一个简单的 HTML 文件中显示该图像：https ://codepen.io/seancowan-dev/pen/jOEdJvy?editors=1011

new Image();如果您向其传递格式正确的数据 URI，它应该可以工作。因此，让我们看看您的 URI 中的内容，以确保它是正确格式化的 base64。

你能截个图console.log(base64Img)让我们看看里面有什么吗？

推荐阅读