[英]Convert framebuffer dump to image(bmp, png, etc.)
我有一個服務器,我在其中使用cat /dev/fb0 > fbdump.raw
轉儲幀緩沖區數據,並將此文件的內容發送到 web 客戶端以顯示為屏幕截圖。 在發布問題之前嘗試了很多鏈接,但沒有一個有助於在 HTML/JS 客戶端呈現圖像。
客戶端是否需要任何處理,或者 JavaScript 中是否有現成的 API 可用? 任何建議表示贊賞。 提前致謝。
參考鏈接:
您可以將ImageData
(存儲在Uint8ClampedArray
中的原始 RGBA 圖像數據)放在 canvas 上。
您必須通過交換紅色和藍色將幀緩沖區轉儲 (BGRA) 轉換為 RGBA。 將 alpha 設置為 255(不透明)也是必要的,因為 linux 幀緩沖區不使用 alpha 通道,因此通常為 0(透明)。
fetch("fbdump.raw") // load the dump
.then(response => response.arrayBuffer()) // convert the response to a ArraBuffer
.then(array_buffer => {
let canvas = document.querySelector("canvas") // get the canvas
let ctx = canvas.getContext("2d") // get the context
let raw_data = new Uint8ClampedArray(array_buffer) // use the ArrayBuffer as a Uint8ClampedArray for easier acces and the constructor of ImageData needs a Uint8ClampedArray
for (let i = 0; i < raw_data.length; i += 4) {
// convert the BGRA dump to RGBA
let b = raw_data[i + 0]
raw_data[i + 0] = raw_data[i + 2]
raw_data[i + 2] = b
raw_data[i + 3] = 255 // set alpha to 255 to make it non transparent (the alpha ist set to 0 and is unused in the linux framebuffer)
}
let image_data = new ImageData(raw_data, 1920, 1080) // create a new ImageData object with a resolution of 1920x1080
// set the canvas resolution to 1920x1080
canvas.width = 1920
canvas.height = 1080
ctx.putImageData(image_data, 0, 0) // puts the image on the canvas, starting at (0,0)
})
此代碼假定幀緩沖區具有 1920x1080 的分辨率和 BGRA 像素格式。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.