I am successfully using node-webshot to create a screenshot of a url in node:

const removalURL = removeItem.url[0];
const renderStream = webshot(removalURL);
const file = fs.createWriteStream("screenshot.png", {
  encoding: "binary",
});

renderStream.on("data", function (data) {
  file.write(data.toString('binary'), 'binary');
});

However - I don't want to actually store or save the img from the stream - I just want to display it on the front end of the site to the user. I was hoping I could do this through some combination of node fs / blob / createObjectURL, but I haven't been able to get anything that displays as a proper image on the front end. I tried:

const removalURL = removeItem.url[0];
const renderStream = webshot(removalURL);

let imgStream = `data:image/png;base64,`;
renderStream.on("data", function (data) {
  console.log("render data", data);
  imgStream += Buffer.from(data).toString("base64");
});

where imgStream would end up as the src attribute for the image.

The console log looks like:

<Buffer aa c2 26 eb 04 35 48 2a 6c 2e b0 e2 f1 78 58 bd af c6 7b ec ea ee 51 87 bd 5f b0 51 cb a5 9d c2 bd 6b 0c fc b9 b7 86 3b 0e c9 67 68 15 85 d1 47 58 e0 ... 6094 more bytes>

and the resulting img tag src looks like:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAMACAYAAAC6uhUNAAAACXBIWXMAAAsTAAALEwEAmpwYAAAgAElEQVR4nOzdd3gU1frA8e9sTbIppJEKKST0DgICBhQUEUVBVOwF9WeHa7kW0Guv2LFcBQsWbAiiiChFqtI7BAhJKAnpfXe...">

but the image appears broken on the website. How do I get this image to display properly on the site without writing the file to disk first?