如何将原始十六进制图像转换为 html img答案

【问题标题】：How to convert a raw hexadecimal image to a html img如何将原始十六进制图像转换为 html img
【发布时间】：2018-05-13 15:53:08
【问题描述】：

我有一个原始的十六进制表示和图像，如下所示："FF00FF00FF00"

每2个字母代表一个像素的颜色，在这个例子中是6像素白-黑-白-黑-白-黑，2x3像素（宽x高）。

我想将其转换为可重新呈现的 html 图像。

我想知道最好的解决方案是什么？

我正在考虑将 HEX 字符串一一转换为 base64，然后使用 <img> 标记将其显示在 html 页面上。

我是用python来转换的：

encoded = HEX_STRING.decode("hex").encode("base64")

逐个像素地转换它会给我这个/wAA/wAA/wAA。然后我会将其作为src 添加到图像标签中：<img src='data:image/png;base64,iVBORw0KGgo/wAA/wAA/wAA' alt='img'>

这不起作用。

我能想到的唯一其他方法是使用 html 画布逐像素绘制图像。

我想知道是否有更简单的解决方案？

【问题讨论】：

有趣的问题，我不太喜欢字节/十六进制的东西，但是你实际使用的代码是什么，因为我无法得到你提出的问题感觉，你的 hex_string 到底是什么，你有没有在任何地方使用过codecs？
我正在将图像从客户端发送到服务器，然后从那里发送到另一个客户端。图像必须转换成原始的十六进制代码（我在前端的 JS 中逐个像素地执行此操作，然后发送代码。在后端，服务器是 python）。图像为 300x150px，hex_string 为 45000 对十六进制代码（FF、00 等）。总共有 90000 个字母。
我没有在任何地方使用过编解码器

标签： javascript python html image

【解决方案1】：

一个基本的方法：

import ast
import imageio
import numpy as np
data="FF00FF00FF00"*100
shape=(30,20)

to_int=ast.literal_eval(str("0x")+data)
to_array=np.frombuffer(to_int.to_bytes(len(data)//2,'big'),
np.uint8).reshape(shape)
##
imageio.imsave("try.png",to_array)

图片在那里：

【讨论】：

【解决方案2】：

为了使data:image/png;base64,iVBORw0KGgo/wAA/wAA/wAA 有意义，iVBORw0KGgo/wAA/wAA/wAA 必须代表一个有效的 base64 编码的 PNG 图像。

最简单的方法是使用画布：

function create_image(width, height, grayscale_pixels) {
    var $canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    var image_data = context.createImageData(width, height);

    for (var i = 0; i < width * height; i++) {
        // Write (r, g, b, a)
        image_data[4 * i + 0] = grayscale_pixels[i];
        image_data[4 * i + 1] = grayscale_pixels[i];
        image_data[4 * i + 2] = grayscale_pixels[i];
        image_data[4 * i + 3] = 255;
    }

    context.putImageData(image_data, 0, 0);

    return $canvas;
}

您可以使用$canvas.toDataURL('image/png') 获取可用的data: URL。

如果您的目标浏览器不支持画布并且需要数据 URL，那么您将不得不这样做。我建议您尝试使用更简单的 BMP 图像格式，而不是 PNG。这是一个 Python 示例：

def pack_int8(n):
    return bytes([n & 0xFF])

def pack_int16(n):
    return pack_int8(n) + pack_int8(n >> 8)

def pack_int32(n):
    return pack_int16(n) + pack_int16(n >> 16)

def create_bmp(image):
    width = len(image[0])
    height = len(image)

    # Much faster to `b''.join(pixels)` than to `pixels += b'...'
    pixels = []

    for row in image:
        for r, g, b in row:
            pixels.append(pack_int8(r) + pack_int8(g) + pack_int8(b))

        # Pad the row
        pixels.append(b'\x00' * ((-3 * len(row)) % 4))

    size = 26 + sum(map(len, pixels))
    header = b''

    header += b'BM'
    header += pack_int32(26 + len(pixels))  # total size
    header += b'\x00\x00'                   # reserved1
    header += b'\x00\x00'                   # reserved2
    header += b'\x1a\x00\x00\x00'           # offset of pixels (2+4+2+2+4+4+2+2+2+2)

    header += b'\x0c\x00\x00\x00'           # header size (4+2+2+2+2)
    header += pack_int16(width)             # width
    header += pack_int16(height)            # height
    header += b'\x01\x00'                   # color planes
    header += b'\x18\x00'                   # bits per pixel (24)

    return header + b''.join(pixels)


with open('test.bmp', 'wb') as handle:
    width = 1000
    height = 1000

    image = [
        [((i+j-i**2+j**2-i*j) % 256,) * 3 for i in range(width)]
        for j in range(height)
    ]
    handle.write(create_bmp(image))

您可以轻松地将其转换为 JavaScript 并对其进行 base64 编码。

【讨论】：