Wie konvertiert man ein Array von HTML-Farben in ein Bild? [geschlossen]

Es sind ein paar Zeilen 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")

Eine kurze Erklärung:

• convertist eine Funktion, die einen HTML-Farbstring (wie '#00ff00') in eine Liste von Farbwerten (zB [0,256,0]) umwandelt.
• Bist ein Array, in dem jedes Pixel mit konvertiert wird convert.
• Image.fromarraydient dazu, genau solche Arrays in Bilder umzuwandeln.

<canvas>Sie können dies einfach mit dem Element und etwas JavaScript tun ... Aist bereits im 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
    }
}

Hinweis : Diese Lösung färbt die Pixel von links nach rechts und dann von oben nach unten, da ich das Format Ihres Arrays so interpretiert habe. Wenn Sie möchten, dass es von oben nach unten und dann von links nach rechts geht, wechseln Sie einfach rowund colin der fillRectZeile wie folgt :

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

Sehen Sie sich hier die Demo an !