¿Cómo convertir una matriz de colores HTML en una imagen? [cerrado]

Son unas pocas líneas en 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")

Una breve explicación:

• convertes una función que convierte una cadena de color HTML (como '#00ff00') en una lista de valores de color (p. ej., [0,256,0]).
• Bes una matriz donde cada píxel se convierte con convert.
• Image.fromarrayes para convertir precisamente tales matrices en imágenes.

Puedes hacer esto fácilmente usando el <canvas>elemento y algo de JavaScript... ¡ Aya está en formato JS!

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

Nota : esta solución colorea los píxeles de izquierda a derecha y luego de arriba a abajo porque así es como interpreté el formato de su matriz. Si necesita que vaya de arriba a abajo y luego de izquierda a derecha, simplemente cambie rowy colen la fillRectlínea de esta manera :

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

¡ Mira la demostración aquí !