Question

可以检索位图数据HTML Canvas 2D元素，是否也可以将Canvas 3D / WebGL元素的渲染内容作为位图数据进行访问？

Answer 1

WebGL的readPixels的签名在后来的草案中发生了变化。

不是每次都返回带有像素数据的新数组，而是传递一个数组作为最后一个参数填充：

void readPixels（GLint x，GLint y，GLsizei width，GLsizei height，GLenum format，GLenum type，ArrayBufferView pixels）

这允许为多个readPixels操作重用相同的数组。

Answer 2

ArrayBufferView readPixels(GLint x, GLint y, 
    GLsizei width, GLsizei height, GLenum format, GLenum type)

返回带像素的ArrayBufferView   在传递的矩形内。数据   从readPixels返回必须是   截至最近的最新版本   发送绘图命令。任何未经处理的   必须完成绘图命令   他们的结果呈现给当前   在readPixels之前绘制缓冲区   访问绘图缓冲区。

的特定子类   返回的ArrayBufferView取决于   传递的类型。如果是   UNSIGNED_BYTE，Uint8Array是   返回，否则Uint16Array是   返回。

Answer 3

不像使用readPixels那样直接，但这可能也有效。您还可以将画布渲染为Image元素，如下所示：

var img = document.getElementById("game-canvas").toDataURL("image/jpeg");
$("#shots").append("<img src=\"" + img + "\" width=\"320\" height=\"480\"/>");

你必须使用特殊选项preserveDrawingContext来获取你的webgl上下文，以便它可以工作：

var gl = canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true});

从那时起，如果你想轻松操作图像，可以在2d画布中渲染它，并根据需要读取像素。

我经常使用它来拍摄我正在玩的东西的“截图”。

你如何检索WebGL位图数据？

3 个答案: