如何在 <img> 标签内显示二进制照片

Posted 2023-03-29

【中文标题】如何在 <img> 标签内显示二进制照片

【英文标题】：How to show binary photo inside <img> tag

【发布时间】：2021-08-03 21:24:03

【问题描述】：

我想知道是否有办法使用我从服务器获取的二进制照片。

例如，我有这种网址mybackend.com/get_image?id=1，作为回复，我得到了一张照片。

这是我 console.log 的响应：

�PNG
IHDR
ռ��IDATx�� ���
U��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“E>�|�(�Q��G��“�HL/�MwIEND�B`�

我猜我记录的这个值是二进制的。 当我设置 <img src="mybackend.com/get_image?id=1" /> 时，它可以工作，因为浏览器首先进行 GET 网络调用，并让这个二进制显示可能在幕后。

我找到了很多关于这个的答案，它通常说我需要将它转换为 base64，然后将它插入到src 属性中。但他们并没有让我接近展示照片。

谢谢

【参考方案1】：

const base64Image = btoa(binaryImage);
const imageTag = `<img src="data:image/png,$base64Image" />`

btoa 有一个警告 - 二进制文件必须具有特定的字符串表示。 MDN article 解释了如何解决这个问题：

// convert a Unicode string to a string in which
// each 16-bit unit occupies only one byte
function toBinary(string) 
  const codeUnits = new Uint16Array(string.length);
  for (let i = 0; i < codeUnits.length; i++) 
    codeUnits[i] = string.charCodeAt(i);
  
  return String.fromCharCode(...new Uint8Array(codeUnits.buffer));


// a string that contains characters occupying > 1 byte
const myString = "☸☹☺☻☼☾☿";

const converted = toBinary(myString);
const encoded = btoa(converted);
console.log(encoded);                 // OCY5JjomOyY8Jj4mPyY=

虽然使用开箱即用的库可能更容易，例如js-base64

<script src="https://cdn.jsdelivr.net/npm/js-base64@3.6.0/base64.min.js"></script>

Base64.fromUint8Array(binaryImage);

【讨论】：

这不起作用，因为它似乎有一些奇怪的字符。这是错误：Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range

@MarioPetrovic 嗯，很有趣。 MDN 文档说“注意 btoa() 期望传递二进制数据，如果给定的字符串包含任何 UTF-16 表示占用超过一个字节的字符，则会抛出异常。有关更多详细信息，请参阅 btoa() 的文档。” Binary strings 。诚然，我没有用过这个功能 - 我现在正在寻找

啊，太好了。非常感谢