Obtener el color de píxeles de Base64 PNG utilizando javascript?

Question

Tengo un PNG codificado en base64. Necesito obtener el color de un pixel usando javascript. Supongo que tendré que convertirlo a un PNG normal. ¿Alguien puede señalarme en la dirección correcta?

Answer 1

Crea un objeto Image con la imagen base64 como fuente. Luego puede dibujar la imagen en un lienzo y usar la función getImageData para obtener los datos de los píxeles.

Aquí es la idea básica (no he probado esto):

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;