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

Question

我具有和的原始十六进制表示形式，如下所示： "FF00FF00FF00"

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

我想将其转换为html可再现的图像。

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

我正在考虑将十六进制字符串一一转换为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 canvas逐像素绘制图像。

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

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

图像在那里：

Answer 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编码。