Get Pixelfarbe von Base64 PNG mit Javascript?

Question

Ich habe eine Base64-codierte PNG. Ich brauche die Farbe eines Pixels mit Javascript. Ich gehe davon aus, dass ich es wieder in ein normales PNG konvertieren muss. Kann mir jemand in die richtige Richtung zeigen?

Answer 1

Ein Image Objekt mit dem base64 Bild als Quelle. Dann können Sie das Bild auf eine Arbeitsfläche zeichnen und die getImageData-Funktion verwenden, um die Pixeldaten abzurufen.

Hier ist die Grundidee (ich dies nicht getestet):

var image = new Image(); 
image.onload = function() { 
    var canvas = document.createElement('canvas'); 
    canvas.width = image.width; 
    canvas.height = image.height; 

    var context = canvas.getContext('2d'); 
    context.drawImage(image, 0, 0); 

    var imageData = context.getImageData(0, 0, canvas.width, canvas.height); 

    // Now you can access pixel data from imageData.data. 
    // It's a one-dimensional array of RGBA values. 
    // Here's an example of how to get a pixel's color at (x,y) 
    var index = (y*imageData.width + x) * 4; 
    var red = imageData.data[index]; 
    var green = imageData.data[index + 1]; 
    var blue = imageData.data[index + 2]; 
    var alpha = imageData.data[index + 3]; 
}; 
image.src = base64EncodedImage;