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

Question

I'm (relatively) new to software dev and am stuck with trying to display a Base64 Binary image in a React component.

Problem: I'm ultimately trying to display a Buffer JPEG Image in an <img /> tag with a React component.

Using screenshot-desktop npm package ( https://www.npmjs.com/package/screenshot-desktop ) to capture desktop.

screenshot() returns a Promise which exposes a Buffer JPEG object.

Based on numerous posts, I have tried to convert this to a Base64 format and then update state so that I can subsequently access the Base64 image to include as a src in the image tag.

Here are the key parts of my code:-

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>
  );
}

Key Issues:-

1. With the above code, I realise that the initial src value won't display anything.

2. On clicking the button, I'm able to display the first 20 characters of the Base64 image, so I believe that the conversion process is working. After pressing the button, no image is shown nor is there any error shown.

3. Note: On checking devTools in the chrome Bowser, the object that screenshot() produces is stated as "Uint8 array"

Question: My understanding is that the component should re-render on setting a new state. Where am I going wrong ? Any help would be much appreciated.

Answer 1

I don't believe btoa() is what you want. That will try to convert your binary to ascii text: https://www.w3schools.com/JSREF/met_win_btoa.asp

I found these questions and answers that just put the base64 data into the image, like you're doing, directly from the source. convert base64 to image in javascript/jquery How to show base64 image in react?

Those answers may point you in the right direction. If not, there are several npm modules around displaying base64 images. They may be able to solve it for you. https://npms.io/search?q=convert-image-base64

Answer 2

If the image is of type file you can maybe try to use URL.createObjectURL(yourData) It takes a type file or blob as input and sends a temporary URL. So to convert a uint8 array into a blob you can try new Blob([bufferedImage])

Code:

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

Tell me if it works.