如何在无压缩库情况下通过img标签在网页展示原始像素数组

这是最匹配你需求的方案，无需移植任何图像压缩库，无需JS支持，调整成本极低，可直接通过<img src="http://myserver.com/id/" />正常加载。

BMP方案实现要点 #

• 未压缩BMP格式仅由「14字节固定文件头 + 40字节BITMAPINFOHEADER信息头 + 原始像素数据」三部分组成，全程无压缩运算，算力消耗可以忽略，完全适配区块链开发环境的限制
• 你只需要在服务器返回的原始像素数组前拼接上述两个固定头，再根据你的图像宽高、像素位深（比如24位RGB、32位RGBA）修改头内对应字段即可，总修改量仅54字节，门槛极低
• 接口响应头设置Content-Type: image/bmp，浏览器即可直接识别为图像资源，img标签无需额外处理
• 小调整注意点：BMP像素存储顺序为BGR而非RGB，行数据需按4字节对齐，且默认从图像底部行开始向上存储，仅需要做简单的字节顺序和排列调整，无复杂运算
• 如果需要更小的文件体积，也可以生成未压缩PNG：未压缩PNG仅需要计算块的CRC校验值，运算量远低于压缩算法，体积比BMP更小，只是实现复杂度略高于BMP，可根据需求选择

其他思路的问题说明 #

• data URI方案：你提到的src="data:XXXXXX;base64,http://myserver.com/id/"写法本身不成立，data URI的逗号后必须填写实际的base64编码资源内容，不能填写远程URL。如果要使用data URI，XXXX位置填对应图像的MIME类型即可（比如BMP对应image/bmp），但该方案不适合直接引用远程接口的场景
• SVG承载方案：无JS实现的前提下需要给每个像素单独生成<rect>元素，像素量越大文件体积膨胀越严重，渲染性能也会大幅下降，不推荐
• CSS实现方案：需要动态生成大量背景色、定位规则，代码冗余度极高，生成和维护成本远高于BMP方案，不推荐
• Canvas方案：虽然实现简单但强依赖JS运行，不符合你无需JS的需求，优先级低于BMP方案

内容的提问来源于stack exchange，提问作者Austin Fatheree