javascript - Display an Uint8Array as image - Stack Overflow

admin管理员组

文章数量:1323524

Given a typed array such as:

const myBuffer = new Uint8Array([255,0,0,255])

How could I obtain a base64 encoded an image, to be put in the DOM?

<img src={ whatToDoHere(myBuffer) }/>

I'd like to see a 1px x 1px red image.

I'm reading a WebGL render target using gl.readPixels(). My mind melted from reading about a dozen different questions regarding this, and none of them solved my issue.

If I render directly to the canvas, I can use toDataURL on the DOM element (canvas) and get what I need. I'd like to do it from a target though, not the drawing buffer.

Given a typed array such as:

const myBuffer = new Uint8Array([255,0,0,255])

How could I obtain a base64 encoded an image, to be put in the DOM?

<img src={ whatToDoHere(myBuffer) }/>

I'd like to see a 1px x 1px red image.

I'm reading a WebGL render target using gl.readPixels(). My mind melted from reading about a dozen different questions regarding this, and none of them solved my issue.

If I render directly to the canvas, I can use toDataURL on the DOM element (canvas) and get what I need. I'd like to do it from a target though, not the drawing buffer.

• javascript
• html

Share Improve this question Follow edited Nov 1, 2020 at 17:50 tanguy_k 12.4k66 gold badges6262 silver badges6464 bronze badges asked Jul 17, 2017 at 22:15 pailheadpailhead 5,43122 gold badges2929 silver badges5252 bronze badges 18

• You can use data URIs in your img tag - your hard part is converting your typed array into a base-64 string that represents a character encoding such as base-64 or ASCII or UTF-8. See the MDN documentation on how to do this conversion. – Akshat Mahajan Commented Jul 17, 2017 at 22:20
• Why does it have to be an image? That data array would fit perfect for a 2d canvas via ImageData. – Stephan Commented Jul 17, 2017 at 22:21
• You need to show us what you don't understand about those questions. otherwise, this looks an awful lot like stackoverflow./q/12710001/215552 bined with stackoverflow./q/1207190/215552. – Heretic Monkey Commented Jul 17, 2017 at 22:22
• @AkshatMahajan do you have any tips on the hard part? I cant even track down all the SE questions that i encountered, but i've tried using random custom functions, btoa, TextDecoder etc etc. – pailhead Commented Jul 17, 2017 at 22:22
• 2 @AkshatMahajan simply converting the encoding isn't enough. One has to add a bitmap file header and make additional adjustments such that it bees a valid file. – Stephan Commented Jul 17, 2017 at 22:24

 |  Show 13 more ments

2 Answers 2

Sorted by: Reset to default 3

This is a bit off topic. Here a solution without WebGL or the Canvas. This is very simple using a Blob:

// Small red dot image
const content = new Uint8Array([137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82, 0, 0, 0, 5, 0, 0, 0, 5, 8, 6, 0, 0, 0, 141, 111, 38, 229, 0, 0, 0, 28, 73, 68, 65, 84, 8, 215, 99, 248, 255, 255, 63, 195, 127, 6, 32, 5, 195, 32, 18, 132, 208, 49, 241, 130, 88, 205, 4, 0, 14, 245, 53, 203, 209, 142, 14, 31, 0, 0, 0, 0, 73, 69, 78, 68, 174, 66, 96, 130]);

document.getElementById('my-img').src = URL.createObjectURL(
  new Blob([content.buffer], { type: 'image/png' } /* (1) */)
);

Should display a small red dot: <img id="my-img">

(1) It also works without specifying the MIME type.

A solution would be to directly generate a data URL from webgl's canvas using canvas.toDataURL, which also supports image pression.

本文标签： javascriptDisplay an Uint8Array as imageStack Overflow