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

标签 javascript canvas imagebitmap

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

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

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

最佳答案

您可以在将图像渲染到 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);

关于javascript - 我如何使用带有原始数据而不是图像的 createImageBitmap 作为输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57925590/

相关文章:

canvas - 是否可以在没有 Canvas 的情况下从 ImageBitMap Web 对象获取像素?

javascript - 使用 PHP 解析原始获取数据

javascript - 在 C# 中将 JSON 字符串转换为强类型类对象

javascript - getElementById() 不适用于动态分配的 id

javascript - 自动更新标记谷歌地图v3

android - 将位图添加到 Canvas 时出现 IllegalStateException

html - 如何使用 html5 canvas 获取文本的边界框?

javascript - Canvas 图像与 Canvas 或原始图像的大小不同