如何更新 React 组件的“src”并将 Base64 对象显示为 React 组件中的图像？

Question

我（相对）是软件开发新手，并且一直在尝试在 React 组件中显示 Base64 二进制图像。

问题：我最终试图在带有 React 组件的<img /> 标记中显示缓冲区 JPEG 图像。

使用 screenshot-desktop npm 包 (https://www.npmjs.com/package/screenshot-desktop) 捕获桌面。

screenshot() 返回一个暴露 Buffer JPEG 对象的 Promise。

根据大量帖子，我尝试将其转换为 Base64 格式，然后更新状态，以便随后可以访问 Base64 图像以将其作为 src 包含在图像标签中。

这是我的代码的关键部分：-

const screenshot = require("screenshot-desktop");

function ScreenCapturer(props) {

  const [image, setImage] = useState("");

  function captureCurrentScreen() {
    screenshot().then((bufferedImage) => {
      let base64Image = btoa(bufferedImage);
      setImage(base64Image);
    });
  }


  return (
    <div >

      <img className="image-holder" alt="" src={`data:image/jpeg;base64,${image}`}/>

      <h3>Image Capturer</h3>

      <h4>Base64Image : {image.substring(1, 20)}</h4>

      <button
        onClick={() => {
          captureCurrentScreen();
        }}
      >
        Capture
      </button>
    </div>
  );
}

关键问题：-

1. 通过上面的代码，我意识到初始的src 值不会显示任何内容。

2. 单击按钮后，我可以显示 Base64 图像的前 20 个字符，因此我相信转换过程正在运行。按下按钮后，没有显示图像，也没有显示任何错误。

3. 注意：在 chrome Bowser 中检查 devTools 时，screenshot() 生成的对象被声明为“Uint8 数组”

问题：我的理解是组件应该在设置新状态时重新渲染。我哪里错了？任何帮助将不胜感激。

Answer 1

我不相信 btoa() 是你想要的。这将尝试将您的二进制文件转换为 ascii 文本：https://www.w3schools.com/JSREF/met_win_btoa.asp

我发现这些问题和答案只是将 base64 数据放入图像中，就像您正在做的那样，直接从源中获取。 convert base64 to image in javascript/jquery How to show base64 image in react?

这些答案可能会为您指明正确的方向。如果没有，有几个 npm 模块围绕显示 base64 图像。他们也许可以为您解决。 https://npms.io/search?q=convert-image-base64

Answer 2

如果图像是文件类型，您可以尝试使用URL.createObjectURL(yourData) 它以类型文件或 blob 作为输入并发送一个临时 URL。 因此，要将 uint8 数组转换为 blob，您可以尝试 new Blob([bufferedImage])

代码：

const blob = new Blob([bufferImage]);
const tempUrl = URL.createObjectURL(blob);
setImage(tempUrl)
/// ...
<img src={tempUrl} />

告诉我它是否有效。