如何在不使用dom函数的情况下将uint8clampedarray转换为图像?

ig9co6j1  于 2021-09-23  发布在  Java
关注(0)|答案(1)|浏览(1082)

tl/dr:如何转换 Uint8ClampedArray 使用rgba值而不使用 DOM ( canvas 元素)或 OffscreenCanvas ?
我正在寻找一种方法来转换 Uint8ClampedArray 对象(它保存rgba值)设置为有效的 Blob 物体或物体 Blob url使用 URL.createObjectURL 对于由 blurhashfast-blurhash 包,限制为不能使用 DOM ( canvas 等)或 OffscreenCanvas .
这个 blurhash 库将“blurhash”转换为 Uint8ClampedArray 对象,保存rgba值,然后可用于渲染占位符图像;通常通过使用 canvas 元素。
在我的例子中,我想从 Uint8ClampedArray 未使用的对象 DOM -相关职能或 OffscreenCanvas .
有没有办法转换给定的 Uint8ClampedArray 使用将数据转换为可视图像 Blob A. Blob url或任何其他浏览器本机功能,而不使用 canvas ?
谢谢!

velaa5lx

velaa5lx1#

最好的方法是直接从imagebitmap转换为blob,但目前还没有(尽管bitmaprenderer画布与此非常接近)。
但是你可以自己编写一个png(或任何其他格式)编码器,或者使用互联网上已有的编码器(这里我将使用它)https://github.com/wheany/js-png-encoder 因为出于某些原因,它已经出现在我的浏览器历史记录中)。

// We use a 32bit Array because it's faster to set pixels on it
const data = new Uint32Array(300*150);
// make some noise
for(let i = 0; i<data.length; i++) {
  data[i] = Math.random() * 0xFFFFFF + 0xFF000000;
}
const uint8 = new Uint8ClampedArray(data.buffer);
const as_str = [...uint8].map(byte => String.fromCharCode(byte)).join("");
const png_str = generatePng(300, 150, as_str);
const png_arr = new Uint8Array(png_str.length);
for (let i = 0; i < png_str.length; i++) {
  png_arr[i] = png_str.charCodeAt(i);
}
const blob = new Blob([png_arr], {type: "image/png"});
const img = new Image();
img.src = URL.createObjectURL(blob);
document.body.append(img)
<script src="https://cdn.jsdelivr.net/gh/wheany/js-png-encoder@master/generatepng.js"></script>

然而,这可能不是一个好主意。就在这个片段中,我们在内存中复制了5次图像数据(2倍于原始像素数据,3倍于png),与本机libpng相比,我们用于进行所有转换的所有路径都非常慢。我不知道为什么您认为不能使用画布,但请注意,即使是node也有一个2d画布实现。

相关问题