readPixels в base64 (преобразование буфера на стороне сервера WebGL)

Я использую headless-gl для запуска webGL на Node.js, динамически создавая изображение на сервере. После создания изображение должно быть сохранено в базе данных (MongoDB), прежде чем пользователь снова получит доступ к изображению через API.

Ниже часть, где изображение генерируется:

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

Затем пиксели преобразуются в base64 (поскольку это рекомендуемый способ загрузки Image в клиентском HTML).

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

Однако строка, созданная этим буфером, не может быть декодирована для создания изображения. Может быть, пиксели не бинарного типа? Или я должен просто сохранить строку пикселей в базе данных и попытаться перерисовать пиксель на холсте пиксель за пикселем в клиенте (я не думаю, что это лучший способ)?

Источник

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, вы получаете необработанные растровые данные. Если вы хотите, чтобы это отображалось через браузер, вы должны повторно инкапсулировать необработанные данные в известный формат файла изображения, такой как BMP, TGA, JPEG, PNG и т. Д. Таким образом, вы должны создать файл в двоичном режиме (для формата BMP или TGA это довольно просто).

Источник
Другие вопросы по тегам