Question

给定一个类型化数组，例如：

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

我如何获得 ~~base64编码~~ 图像，以便放入DOM？

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

我想看一张1px x 1px的红色图像。

我正在使用gl.readPixels()阅读webgl渲染目标。从阅读十几个不同的问题开始，我的思绪融化了，没有一个问题解决了我的问题。

如果我直接渲染到画布，我可以在dom元素（画布）上使用toDataURL并获得我需要的东西。我想从目标中做到这一点，而不是绘图缓冲区。

Answer 1

解决方案是使用canvas.toDataURL从webgl的画布直接生成数据URL，这也支持图像压缩。

Answer 2

这是一个题外话。这里是没有WebGL或Canvas的解决方案。使用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）也可以在不指定MIME类型的情况下使用。

将Uint8Array显示为图像

2 个答案: