我如何使用带有原始数据而不是图像的 createImageBitmap 作为输入

Question

我正在编写一个数据可视化应用程序，它需要我处理非常大的二维数据数组并将该数据转换为按比例缩小的图像，以便在 DOM 中的 canvas 中显示。

我遇到了 DOM canvas 尺寸限制。我的数组可以大到 5000 x 5000。我想通过使用 createImageBitmap() 同时缩小并将大数组转换为更小的 ImageBitMap 来绕过 canvas 大小限制- 256 x 256 - 用于插入屏幕 canvas。

如何将原始数组数据转换为正确的格式？这种方法行得通吗？

Answer 1

您可以在将图像渲染到 canvas 之前创建和处理图像。不过，5000x5000 对于 canvas 来说应该不会太大。您运行受到哪些限制？回答 here 包括在 canvas 上调整大小然后抓取数据。

var raw = new Uint8ClampedArray(5000*5000*4); // 4 for RBGA
var imageData = new ImageData(raw, 5000,5000);
var bitmap = createImageBitmap(imageData);

How can I use createImageBitmap with raw data as input rather then an image