如何使用带有原始数据而不是图像的 createImageBitmap答案

【问题标题】：How can I use createImageBitmap with raw data as input rather then an image如何使用带有原始数据而不是图像的 createImageBitmap
【发布时间】：2020-01-15 10:41:57
【问题描述】：

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

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

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

【问题讨论】：

你的二维数组中的原始数据是什么，你能详细说明一下吗？
隔离起来有点困难。我目前的方法是：1）将数组绘制到相同大小的 OffScreenCanvas 中。 2) 在较小的目标画布上调用 drawImage() - 256 x 256，它执行缩小和复制。对于大约 4K x 4K 的大数组，永远不会写入目标画布。没有错误。低于这个尺寸它工作正常。
您可能会通过算法减少数据，这与您当前拥有的数据相差了一点点，但是例如将每个 2x2 像素块平均到一个像素的颜色值将是像素数的四分之一。
是的，我同意。 “正确”的方法是对数组数据进行下采样并将其交给目标画布。我希望使用成像功能获得“免费”下采样，而不是自己滚动，

标签： javascript canvas imagebitmap

【解决方案1】：

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

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

【讨论】：

不错。我试试看。
效果很好。干杯。
而且比使用 drawImage() 快几个数量级。哇！
请注意，ImageData 构造函数有the same size limits 而不是 HTMLCanvasElement。所以确实对于 5K*5K 来说应该没问题，甚至是一个不错的选择，但是问题是关于如何解决这些限制，而这个解决方案是行不通的。抄送@dugla
很高兴认识凯多。你是对的，为什么我的原始实现不起作用仍然是一个悬而未决的问题。对于我的应用程序的一位用户，他们的浏览器——我相信是 Chrome——崩溃了。 Gavin 的接近速度提高了 20 倍 - 在向下采样时 - 并且 mems 的使用率大幅下降。