时间戳

首页 > 解决方案 > 如何使用带有原始数据而不是图像的 createImageBitmap

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

问题描述

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

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

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

标签： javascriptcanvasimagebitmap

解决方案

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

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

推荐阅读