如何在不使用 DOM 函数的情况下将 Uint8ClampedArray 转换为图像？答案

【问题标题】：How to convert Uint8ClampedArray to image without using DOM functions?如何在不使用 DOM 函数的情况下将 Uint8ClampedArray 转换为图像？
【发布时间】：2021-09-20 01:51:26
【问题描述】：

TL/DR：如何在不使用DOM（canvas 元素）或OffscreenCanvas 的情况下将具有RGBA 值的Uint8ClampedArray 转换为图像？

我正在寻找一种方法，将包含 RGBA 值的 Uint8ClampedArray 对象转换为有效的 Blob 对象或 Blob URL，使用 URL.createObjectURL 用于由 blurhash 创建的数据或fast-blurhash 包，限制不能使用DOM（canvas等）或OffscreenCanvas。

blurhash 库将“blurhash”转换为 Uint8ClampedArray 对象，保存 RGBA 值，然后可用于渲染占位符图像；最常见的是使用 canvas 元素。

就我而言，我想从Uint8ClampedArray 对象创建一个可查看的浏览器内图像，而不使用DOM 相关函数或OffscreenCanvas。

有没有什么方法可以在不使用canvas 的情况下使用Blob、Blob URL 或任何其他浏览器原生功能将给定的Uint8ClampedArray 数据转换为可视图像？

非常感谢！

【问题讨论】：

标签： javascript image blob data-conversion clamp

【解决方案1】：

最好有办法直接从 ImageBitmap 转到 Blob，但目前还没有（尽管 bitmaprenderer 画布非常接近）。

但是您可以自己编写一个 png（或任何其他格式）编码器，或者使用 Internet 上已有的编码器（这里我将使用 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)

&lt;script src="https://cdn.jsdelivr.net/gh/wheany/js-png-encoder@master/generatepng.js"&gt;&lt;/script&gt;

但是，这可能不是一个好主意。就在这个 sn-p 中，我们确实在内存中复制了图像的数据 5 次（原始像素数据的 2 倍，png 的 3 倍），与原生 libpng 相比，我们用来进行所有转换的所有路径都非常慢可以做。我不知道你为什么认为你不能使用画布，但请注意，即使是节点 has a 2D canvas implementation。

【讨论】：