Question

我有一个原始的十六进制表示形式和图像："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画布逐个像素地绘制图像。

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

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图像。

执行此操作的简单方法是使用canvas：

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:网址。

如果您定位的浏览器不支持画布并且需要数据网址，那么您必须以艰难的方式执行此操作。我建议你尝试更简单的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编码。

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

2 个答案: