readPixels 到 base64（WebGL 服务器端缓冲区转换）

Question

我在 Node.js 上使用 headless-gl 到运行 webGL，在服务器上动态创建图像。创建后，图像将存储在数据库中 (MongoDB)，然后用户可以通过 API.

再次访问图像

下面是生成图片的部分：

var pixels = new Uint8Array(width * height * 4)
gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels)

然后将像素转换为 base64（因为这似乎是客户端图像加载的推荐方式 HTML）。

var base64Image = new Buffer(pixels, 'binary').toString('base64');

但是，无法对由此缓冲区生成的字符串进行解码以生成图像。可能像素不是 'binary' 类型？或者我应该只将像素字符串保存在数据库中并尝试在客户端中逐个像素地重绘 canvas 中的像素（我认为这不是最好的方法）？

Answer 1

你使用readPixels得到的是原始位图数据，如果你的目标是让这个通过浏览器显示，你必须将原始数据重新封装成已知的图像文件格式，比如BMP、TGA、JPEG , PNG, 等。因此您必须以二进制模式构建文件（对于 BMP 或 TGA 格式，这非常简单）。

Answer 2

你从gl.readPixels得到的是位图数据。我使用 Jimp 库将数据转换为不同的格式，然后从中获取 base64 图像字符串。

NodeJS 代码

var Jimp = require("jimp")

//Create context
var width = 50
var height = 50

var gl = require('gl')(width, height, { preserveDrawingBuffer: true })

//Clear screen to red
gl.clearColor(1, 0, 0, 1)
gl.clear(gl.COLOR_BUFFER_BIT)

// get bitmap data 
var bitmapData = new Uint8Array(width * height * 4)
gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, bitmapData)

// use Jimp library to create an image with a specific mime type
var image = new Jimp(width, height, function (err, image) {

    // assign the bitmap as data for the image 
    image.bitmap.data = bitmapData
    // generate base64
    image.getBase64("image/png", function (error, str) {
        // result
        console.log(str)
    })
})

在浏览器中测试它是否适合您（JS 代码）：

var base64Img = "" // TODO paste the result from NodeJS

document.body.innerHTML = ""
document.write('<img src="' + base64Img + '"/>');

readPixels 到 base64（WebGL 服务器端缓冲区转换）

readPixels to base64 (WebGL Server side buffer conversion)

html

glreadpixels

webgl

server-rendering