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.

Share Improve this question edited Nov 1, 2020 at 17:50 tanguy_k 12.4k6 gold badges62 silver badges64 bronze badges asked Jul 17, 2017 at 22:15 pailheadpailhead 5,4312 gold badges29 silver badges52 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

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