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

Question

我正在尝试找出将原始像素数组放入图像标签的最佳方法。像素由没有 png 或 jpg 压缩库的服务器提供，因此原始数组通过 HTTP 请求传入。我可以控制返回 header ，所以我在响应中加入了 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 库转换为我必须使用的基于(区 block 链)的语言。

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大小的chunk，每个chunk都做这一步)。创建一个空数组来保存 DEFLATE 数据流。将该大小作为大端格式的 16 位整数插入当前空的 DEFLATE 数据流中。接下来，附加长度的按位倒数。最后将过滤后的图像数据插入到数据流中。

用zlib包起来

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

将其打包成PNG格式

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

# 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)