[英]What's the fastest way to draw an image to the screen in JavaScript from array of RGB pixels?
我正在开发一个图形前端,该前端呈现服务器端并通过将压缩图像发送到客户端(想想 VNC)将屏幕更新推送到浏览器。 我认为编码 PNG 的开销太高,所以目前我正在通过 websocket(启用压缩)发送 8 位 RGB 像素值的原始 blob。 这实际上非常快,我看到了很大的压缩增益(例如 75K -> 2.7k)。
然而,在客户端,我必须获取原始像素,然后将它们绘制到画布上。 这是我目前最好的代码性能明智的:
// receive message from server
self.ws.onmessage = function (evt) {
// get image offset
var dv = new DataView(evt.data);
var dx = dv.getInt16(0);
var dy = dv.getInt16(2);
var ww = dv.getInt16(4);
var hh = dv.getInt16(6);
var offset = 8;
// get context to canvas and create image
var ctx = self.canvas.getContext("2d");
var img = ctx.createImageData(ww, hh);
// unpack image data
var start = performance.now();
var dst = 0, src = offset;
for (var ii=0; ii < ww*hh; ii++) {
img.data[dst++] = dv.getUint8(src++);
img.data[dst++] = dv.getUint8(src++);
img.data[dst++] = dv.getUint8(src++);
img.data[dst++] = 255;
}
// draw image
ctx.putImageData(img, dx, dy, 0, 0, ww, hh);
var end = performance.now();
console.log("draw took " + (end-start) + " milliseconds");
前面提到的 75K 图像(1000x500 像素)以这种方式渲染需要大约 53 毫秒,这是很长的时间。 执行此绘图操作的最快方法是什么? 我可以输出 RGBA 像素而不是让生活更轻松。
编辑:似乎这可能更像是 Firefox 问题,Chrome 平均在大约 2.5 毫秒内运行相同的解码循环。
切换到完整的 RGBA 输出(由于压缩不会增加太多开销),并使用此代码直接包装 websocket 缓冲区明显更快:
// receive message from server
self.ws.onmessage = function (evt) {
// get image offset
var dv = new DataView(evt.data);
var dx = dv.getInt16(0);
var dy = dv.getInt16(2);
var ww = dv.getInt16(4);
var hh = dv.getInt16(6);
// get context to canvas and create image
var ctx = self.canvas.getContext("2d");
// draw image data
var start = performance.now();
ctx.putImageData(
new ImageData(new Uint8ClampedArray(evt.data, 8), ww, hh),
dx, dy,
0, 0,
ww, hh
);
var end = performance.now();
console.log("draw took " + (end-start) + " milliseconds");
}
现在,大图像尺寸在 Firefox 中渲染需要约 1 毫秒,在 Chrome 中需要 350 微秒。 可以称之为足够好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.