Javascript 如何使用createImageBitmap将原始数据作为输入而不是图像

我正在编写一个data viz应用程序，它要求我处理非常大的2D数据数组，并将这些数据转换为缩小的图像，以便在DOM的画布中显示

我遇到了DOM画布大小的限制。我的阵列可以大到5000 x 5000。我想通过使用

createImageBitmap（）

来绕过画布大小限制，同时缩小大数组的比例并将其转换为较小大小的

ImageBitMap

，以便插入屏幕画布

---

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

在将图像渲染到画布之前，您可以创建和操作图像。5000x5000对于画布来说应该不会太大。你遇到了什么限制？答案包括在画布上调整大小，然后抓取数据

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

---

2D数组中的原始数据是什么，你能详细说明一下吗？这有点难分离。我目前的方法是：1）将数组绘制到大小相同的OffScreenCanvas中。2） 在较小的目标画布（256 x 256）上调用drawImage（），该画布可执行缩小和复制操作。对于一个大约4K x 4K的大数组，永远不会写入目标画布。没有错误。低于这个尺寸就可以了。你可以潜在地减少数据算法，这离你目前拥有的有一点距离，但是例如，平均每个2x2像素块到一个像素值的颜色将是像素数的四分之一。是的，我同意。“正确”的方法是对数组数据进行下采样，然后将其交给目标画布。我希望使用成像功能获得“免费”的下采样，而不是使用我自己的下采样。我试试看，效果很好。干杯。比使用drawImage（）快几个数量级。哇！请注意，ImageData构造函数比HtmlCanvaseElement具有更高的性能。因此，对于5K*5K，它确实应该是可以的，甚至是一个很好的替代方案，但问题是如何绕过这些限制，而这个解决方案不行。cc@Dugla很高兴认识Kaido。你是对的，为什么我最初的实现不起作用，这仍然是一个悬而未决的问题。我的应用程序的一个用户的浏览器——我相信是Chrome——崩溃了。随着加文的接近速度提高了20倍-在下采样-和mems的使用是下降的方式。