How to convert a raw hexadecimal image to a html img

Question

I have a raw hexadecimal representation of and image like this: "FF00FF00FF00"

Every 2 letters represent the color of one pixel, in this example it is 6 pixels white -black -white - black -white - black, 2x3 pixels (width x height).

I want to convert this into an html re-presentable image.

I was wondering what the best solution for this would be?

I was thinking of converting the HEX string one by one into base64 and then use a <img> tag to display it on an html page.

I was using python to convert it:

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

Converting it pixel by pixel would give me this /wAA/wAA/wAA . Then I would add this as a src to an image tag: <img src='data:image/png;base64,iVBORw0KGgo/wAA/wAA/wAA' alt='img'>

This doesn't work.

The only other way I could think of is drawing an image pixel by pixel with html canvas.

I'm wondering if there is an easier solution?

Answer 1

A basic way to do that:

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)

The image is there :

Answer 2

For data:image/png;base64,iVBORw0KGgo/wAA/wAA/wAA to make sense, iVBORw0KGgo/wAA/wAA/wAA would have to represent a valid base64-encoded PNG image.

The easy way to do this would be with 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;
}

You can use $canvas.toDataURL('image/png') to get a usable data: URL.

If you're targeting browsers that don't support canvas and need a data URL, you'll have to do this the hard way. Instead of PNG, I would suggest you try the simpler BMP image format. Here's a Python example:

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

You can easily translate this to JavaScript and base64-encode it.