How to convert an array of HTML colours into into a picture? [closed]

Question

I have an array of colors, for example:

    A=[['#ff00ff', '#00ff00', '#ffff00', '#00ff00', '#0000ff', '#00ffff', '#00ffff'],
       ['#0000ff', '#0000ff', '#00ffff', '#00ff00', '#ffff00', '#00ff00', '#00ff00'],
       ['#ffff00', '#0000ff', '#0000ff', '#ffff00', '#ffff00', '#ffff00', '#ffff00'],
       ['#ffff00', '#ffff00', '#ffff00', '#ffff00', '#00ff00', '#00ff00', '#00ff00'],
       ['#00ff00', '#ffff00', '#ffff00', '#00ff00', '#00ff00', '#00ff00', '#00ff00'],
       ['#00ff00', '#00ff00', '#00ff00', '#00ff00', '#00ff00', '#0000ff', '#0000ff'],
       ['#0000ff', '#00ff00', '#00ff00', '#00ff00', '#0000ff', '#0000ff', '#0000ff']]

I want to convert this into a picture such that the pixel of coordinate (i,j) has the color A[i][j].

Question: How do I do that in Gimp (or directly in HTML, or anything more relevant)?

Remark: The real array I want to convert is 5000 by 5000 (i.e. 25000000 pixels) so I can’t do this by hand and I need an automatic procedure.

---

The following picture is a compression of the result:

About what does this mean, see here.

Answer 1

It’s a few lines in Python:

from PIL import Image
import numpy

A = […]

convert = lambda string: [int(string[i:i+2],base=16) for i in (1,3,5)]
B = numpy.array([map(convert,line) for line in A], dtype=numpy.uint8)
image = Image.fromarray(B, mode="RGB")
image.save("image.png")

A short explanation:

• convert is a function that converst an HTML colour string (like '#00ff00') to a list of colour values (e.g., [0,256,0]).
• B is an array where each pixel is converted with convert.
• Image.fromarray is for converting precisely such arrays into images.

Answer 2

You can do this easily using the <canvas> element and some JavaScript... A is already in JS format!

var canvas = document.querySelector("canvas"), // Select our canvas element
    ctx = canvas.getContext("2d"), // Save the context we're going to use
    width = A[0].length, // Get the width of the array
    height = A.length, // Get the height of the array
    scale = 10; // Scales the whole image by this amount, set to 1 for default size

// Make sure the canvas is no larger than the size we need
canvas.width = width * scale; 
canvas.height = height * scale; 

// Loop through each color and draw that section
for(var row = 0; row < height; row++) {
    for(var col = 0; col < width; col++) { // Since there are nested arrays we need two for loops
        ctx.fillStyle = A[row][col]; // Set the color to the one specified
        ctx.fillRect(col * scale, row * scale, scale, scale); // Actually draw the rectangle
    }
}

Note: This solution colors the pixels in a left to right then top to bottom way because that's how I interpreted the format of your array. If you need it to go top to bottom and then left to right, just switch row and col in the fillRect line like so:

ctx.fillRect(col * scale, row * scale, scale, scale);

Check out the demo here!