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:

enter image description here

About what does this mean, see here.

| improve this question | | | | |
  • What have you tried? What doesn't work about it? What's the end goal? This question needs to be more specific than it currently is IMO – Zach Saucier Mar 16 '15 at 16:17
  • @ZachSaucier: see the last picture here – Sebastien Palcoux Mar 16 '15 at 16:34

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

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.
| improve this answer | | | | |
  • Python language is interesting for my use, because I compute the array with Sage (mode Cython). Do you know how computing this image directly with Sage? – Sebastien Palcoux Mar 15 '15 at 15:09
  • 1
    I do not know about the Cython mode of Sage, but in regular Sage the above code works, if I remove Image from the first line and add from PIL import Image. – Wrzlprmft Mar 15 '15 at 15:26
  • This works, but the image is not what I expected. In fact I want an image like that here. Do you know how doing that with Sage? – Sebastien Palcoux Mar 16 '15 at 5:55
  • Apparently, PIL needs Numpy arrays to be of a specific datatype. I hopefully fixed that now (see edit). – Wrzlprmft Mar 16 '15 at 7:40
  • Yes, this is exaclty that. Thank you very much! – Sebastien Palcoux Mar 16 '15 at 7:55

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!

| improve this answer | | | | |
  • My 1000x1000 array is quite big for a "copy-paste". How can I transport it? – Sebastien Palcoux Mar 15 '15 at 15:06
  • @SébastienPalcoux Copy paste should be able to handle it... But you could open it up in a text editor, change the format to match the one I have here, then Save As a .js file (or .html if you format it that way) – Zach Saucier Mar 15 '15 at 17:03
  • In fact, I would like something like: var A = read(/home/palcoux/array.txt); Do you know the good code for that? – Sebastien Palcoux Mar 16 '15 at 5:51
  • @SébastienPalcoux I do, but that's a separate question than the one asked here :) – Zach Saucier Mar 16 '15 at 12:59

Not the answer you're looking for? Browse other questions tagged or ask your own question.