: How to convert an array of HTML colours into into a picture? I have an array of colors, for example: A=[['#ff00ff', '#00ff00', '#ffff00', '#00ff00', '#0000ff', '#00ffff', '#00ffff'],

@Turnbaugh909

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.

Vote Up Vote Down

@Radia289

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!

Vote Up Vote Down