Question

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

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

Answer 1

如果我理解正确：你有一个像素阵列来自与画布不同的来源，你想要将这些数据绘制到画布上吗？

要手动首先将此像素阵列编码为PNG或JPEG，然后再使用Base-64，这将是JavaScript中相对较慢的过程。

相反，您可以从函数返回一个类型化数组，并在其上使用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);

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

有没有办法内联位图画布？

1 个答案: