title: Display image from blob using javascript and websockets
body: <p>I'm currently working on a WebSocket application that is displaying images send by a C++ server.
  I've seen a couple of topics around there but I can't seem to get rid of this error in Firefox:</p>
  
  <blockquote>
    <p>Image corrupt or truncated: data:image/png;base64,[some data]</p>
  </blockquote>
  
  <p>Here's the Javascript code I'm using to display my blob:</p>
  
  <pre><code>socket.onmessage = function(msg) {
      var blob = msg.data;
  
      var reader = new FileReader();
      reader.onloadend = function() {
          var string = reader.result;
          var buffer = Base64.encode(string);
          var data = "data:image/png;base64,"+buffer;
  
          var image = document.getElementById('image');
          image.src = data;
      };
      reader.readAsBinaryString(blob);
  }
  </code></pre>
  
  <p>I'm using the image of a red dot that I found on this topic: <a href="https://stackoverflow.com/a/4478878/1464608">https://stackoverflow.com/a/4478878/1464608</a>
  And the Base64 class is from here: <a href="https://stackoverflow.com/a/246813/1464608">https://stackoverflow.com/a/246813/1464608</a></p>
  
  <p>But the base64 outcome I get doesn't match and Firefox retrieves me an error of the image being corrupted.</p>
  
  <p>I know this ain't much informations but I don't have a clue where to look :/
  Any help is more than welcome!!</p>