显示来自响应的原始图像数据答案

【问题标题】：Display raw image data from response显示来自响应的原始图像数据
【发布时间】：2018-03-28 00:08:07
【问题描述】：

我有 API url，它会向我发送一张图片作为响应。当我尝试 console.log 我的回复时，我看到了类似的内容：

请告诉我在我的页面中显示原始数据的最佳方式是什么？它是什么格式的原始数据？我什至无法谷歌它，因为我真的不知道它是什么格式。

const img = document.createElement('img');
document.body.appendChild(img);

const src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/280px-PNG_transparency_demonstration_1.png';

fetch(src)
  .then(resp => resp.blob())
  .then(blob => URL.createObjectURL(blob))
  .then(uri => (img.src = uri));

<!-- Polyfill for older browsers -->
<script src="https://cdn.rawgit.com/github/fetch/master/fetch.js"></script>

【问题讨论】：

我想这只是显示为文本的二进制图像数据。如果您尝试在记事本或其他东西中打开文件，则会得到相同的结果。为什么您希望能够在基于文本的控制台中查看图像？
感谢澄清。但他可能无法在未编码的情况下接收二进制数据（例如在 base64 中），因为某些字符对请求无效。只是说
@Kaddath 接收它似乎没有问题，只是对可能显示或使用数据的上下文存在误解
是否要显示代表每个像素的字节值（十六进制）；在二维数组中？
我不会尝试在控制台中查看我的图像。我只是获取原始图像，并想了解如何使用该图像。

标签： javascript html

【解决方案1】：

我建议查看this question。

基本前提是使用btoa进行base64编码，然后将其添加到页面中，如下所示：

var img = document.createElement('img');
img.src = 'data:image/png;base64,' + btoa('your-binary-data');
document.body.appendChild(img);

【讨论】：

谢谢，我想这就是我要找的东西