Get pixel color of Base64 PNG using javascript?

I have a base64 encoded PNG. I need to get the color of a pixel using javascript. I assume I’ll have to convert it back to a normal PNG.
Can anyone point me in the right direction?

  • How to convert image into base64 string using javascript
  • React-Native: Convert image url to base64 string
  • Is it possible to replace a color in a base 64-encoded image?
  • Base64 html images not copying & pasting
  • Saving dataURL(base64) to file on PhoneGap (android)
  • A cross-browser alternative to Canvas2Image or HTML5 download attribute?
  • How to parse into base64 string the binary image from response?
  • Saving GIF into base64 string using Canvas HTML5 javascript
  • Javascript: Blob object to base64
  • Encryption in nodejs
  • Base64 encoding and decoding in client-side Javascript
  • How to add base64 data to FormData so that it's uploaded as binary
  • One Solution collect form web for “Get pixel color of Base64 PNG using javascript?”

    Create an Image object with the base64 image as the source. Then you can draw the image to a canvas and use the getImageData function to get the pixel data.

    Here’s the basic idea (I haven’t tested this):

    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
        // 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 =[index];
        var green =[index + 1];
        var blue =[index + 2];
        var alpha =[index + 3];
    image.src = base64EncodedImage;