使用图像标签在网页上显示原始像素阵列

Question

我正在尝试找出将原始像素数组放入图像标签的最佳方法。像素由没有 png 或 jpg 压缩库的服务器提供，因此原始数组通过 HTTP 请求进入。我可以控制返回标头，因此我在响应中添加了 mime 类型。我想做：

<img src="http://myserver.com/id/" />

但我不认为我能做到这一点。如果可行的话，我可以使用 src="data:XXXXXX;base64,http://myserver.com/id/"，但我需要知道如何处理 XXXX。

我的另一个想法是使用 svg，如果我可以将图像设置为等于 SVG。不确定我是否必须将每个像素包装在一个元素中。

也许有办法用 CSS 来做到这一点？

我可以很容易地用js将数据写入canvas元素，但我希望有一种非js的方式。

我可以对来自服务器的数据的二进制结构进行一些小的操作，所以如果有一种简单的方法来告诉 jpg 或 png 格式这是未压缩的数据，我可以这样做......我只是不'没有能力或时间将 png 或 jpg 库转换为我必须使用的基于（区块链）的语言。

Answer 1

相关链接：zlib RFC、DEFLATE RFC和PNG spec。您在阅读时不妨查阅这些内容。

让我们制作一个 PNG 吧！从 RGBA 图像形式的图像数据开始，例如 2x2 图像：

12 34 56 78  9a bc de f0
cd ef 01 23  45 67 89 ab 

指定过滤器

对于图像的每一行，在开头添加一个空字节以将 PNG 过滤器设置为无。例如，

00  12 34 56 78  9a bc de f0 # row 1 of image
00  cd ef 01 23  45 67 89 ab # row 2 of image

DEFLATE 对其进行编码

虽然这是一种压缩格式，但我们实际上不需要压缩它！DEFLATE 提供了一种在不压缩数据的情况下对数据进行编码的方法（请参阅 DEFLATE 规范的第 3.2.4 节）。求出上面过滤后的图像数据的长度，为16位整数（如果大于65535，则将图像数据分割成65535大小的块，并对每个块执行此步骤）。创建一个空数组来保存 DEFLATE 数据流。将该大小作为大端格式的 16 位整数插入到当前空的 DEFLATE 数据流中。接下来，附加长度的按位倒数。最后将过滤后的图像数据插入到数据流中。

将其包装在 zlib 中

接下来，我们需要对数据进行 zlib 编码。从一个空的 zlib 数据流开始，并为标头插入 2 个空字节。接下来，插入上面的 DEFLATEd 数据。最后，插入未压缩数据的 Adler32 校验和。具体来说，Adler32 校验和应该根据过滤后的图像数据创建。

将其封装为 PNG 格式

最后，让我们将其包装成 PNG 格式。替换宽度和高度值，将IDAT块的长度指定为 zlib 编码数据的长度，并通过采用与数据连接的块名称的 CRC32 校验和来替换IDHR和块的 CRC。IDAT

# PNG signature
137 80 78 71 13 10 26 10

# IDHR chunk
00 00 00 0d # IDHR length
73 72 68 82 # IDHR type
00 00 00 02 # width: COMPUTE THIS
00 00 00 02 # height: COMPUTE THIS
08 # bit depth: 8
06 # colour type: truecolour with alpha
00 # compression method: zlib
00 # filter method: normal
00 # no interlacing
55 55 55 55 # CRC: COMPUTE THIS from "IDHR" + data

# IDAT chunk
55 55 55 55 # IDAT length: COMPUTE THIS
73 68 65 84 # IDAT type
[zlib data]
55 55 55 55 # CRC: COMPUTE THIS from the "IDAT" + data

# IEND chunk
00 00 00 00 # IEND length
73 69 78 68 # IEND type
AE 42 60 82 # CRC (always the same value, doesn't need to be computed)