如何将ArrayBuffer (PNG图像)直接呈现为反应中的图像？

Question

我得到一个ArrayBuffer，表示通过套接字发送的PNG图像文件。是否有一种方法可以直接将其呈现到图像选项卡，而无需首先将其转换为base64？似乎没有必要仅仅为呈现添加额外的转换步骤。

Answer 1

可以将数组缓冲区转换为blob，然后使用URL.createObjectURL(blob)为图像创建源。

示例

​

const { useState, useEffect } = React;

const url = "https://cors-anywhere.herokuapp.com/https://www.w3schools.com/howto/img_avatar2.png"


const App = () => {
  const [{
    srcBlob,
    srcDataUri
  }, setSrc] = useState({
    srcBlob: null,
    srcDataUri: null
  });

  useEffect(() => {
    let isUnmounted = false;
    
    fetch(url, {
    })
      .then(response => response.blob())
      .then(blob => blob.arrayBuffer())
      .then(arrayBuffer => {

        if(isUnmounted) {
          return;
        }
        
        const blob = new Blob([arrayBuffer])
        const srcBlob = URL.createObjectURL(blob);
        
        setSrc(state => ({
          ...state,
          srcBlob
        }));
   
      })
    
    return () => {
      isUnmounted = true;
    }
    
  }, [])

return <div>
  {srcBlob && <div>
    <img width="100" height="100" src={srcBlob} alt="image blob"/>
    <div>Blob: {srcBlob}</div>
    </div>}
</div>
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
  );

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="root"></div>

​