0

我正在为 JavaScript 编写一个在线 REPL，就像为 Python 编写的一样。它的一个特点是一些输出可以是图像，而不仅仅是文本。例如，一个命令可以返回一个绘图图。这些图像被预渲染并在内部表示为像素阵列。

我的疑问是如何在屏幕上显示该信息。我应该将我的像素编码为base64，返回一个内联的<img/>吗？或者有没有办法为画布内联像素数据（这可能会更快）？

4

1 回答 1

1

如果我理解正确：您有一个像素数组来自与画布不同的来源，并且您希望将该数据绘制到画布上？

在 JavaScript 中，首先手动将此像素数组编码为 PNG 或 JPEG，然后再编码为 Base-64 将是一个相对较慢的过程。

相反，您可以从您的函数返回一个类型化数组，并在其上使用视图，然后使用上下文对象Uint32Array将其数据循环复制到画布上的数组中。createImageData

与所有位图一样，您的函数也需要返回宽度和高度，因此您的函数应该以最佳方式返回一个参考数组的对象，除非事先总是知道尺寸。

例如：

/// some function returning a bitmap/pixel array
function getSomeImageData() {

    ...
    return {
        width: width,
        height: height,
        bitmap: myTypedArray
    }
}

然后在复制过程中：

/// get the result from the function
var o = getSomeImageData();

/// create an empty bitmap
var img = context.createImageData(o.width, o.height);

/// create unsigned 32-bit views for the typed arrays
var dst = new Uint32Array(img.data.buffer);
var src = new Uint32Array(o.bitmap);

/// copy using 32-bits integers
var i = src.length;
while(i--) dst[i] = src[i];

/// put image onto the canvas
context.putImageData(img, 0, 0);

（免责声明：内联编写，未经测试）

于 2013-10-29T05:35:08.747 回答