title: HTML base64 images are transparent
body: <p>I'm currently struggling with capturing an image and displaying it. Basically the site takes a picture with the webcam, draw it to a canvas, then uses the following code to convert it to base64:</p>
  
  <pre><code>var image = canvas.toDataURL("image/png");
  </code></pre>
  
  <p>It's then sent to the sql database. I took multiple photos, and all of them have different sizes, so clearly the data is being written correctly. Sadly, when I draw them out, they're transparent. I inspected the page as well, and checked that the base64 of the <code>&lt;img&gt;</code> matches the one on the database, and it does, but it also displays the image as transparent when I hover over it. Any reason why this happens? Here's what the start of the base64 looks like:</p>
  
  <p>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAJYCAYAAACadoJwAAAgAElEQVR4XsS9WZClaXIldO6.</p>
  
  <p>This is how I echo it out:</p>
  
  <pre><code>echo '&lt;img src="' . $row['image'] . '"&lt;/img&gt;';
  </code></pre>