我正在尝试找出将原始像素数组放入图像标签的最佳方法。像素由没有 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 链)的语言。
最佳答案
相关链接: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)
关于html - 使用图像标签在网页上显示原始像素阵列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69327606/