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

编程问答 2022-08-13

问题描述

我（相对）是软件开发人员的新手，并且一直试图在React组件中显示Base64 Binary映像。

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

使用屏幕快照桌面npm软件包（https://www.npmjs.com/package/screenshot-desktop）捕获桌面。

screenshot（）返回一个Promise，它公开了Buffer JPEG对象。

基于许多帖子，我尝试将其转换为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 array”

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

解决方法

我不相信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?

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

,

如果图像是文件类型，则可以尝试使用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} />

告诉我是否可行。

base64bufferedimagejavascriptreact-functional-componentreactjsreactjs