title: Error converting Image from Base64 - HTMLImageElement is broken
body: <p>I'm attempting to load an image and convert it to binary data through PHP, then decode the data and load it onto an HTML5 canvas through Javascript. However I'm running into the following error:</p>
  
  <pre><code>Uncaught InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.
  </code></pre>
  
  <p>Here's all of my code, the only bit of PHP is up front. Please note I also tried just using the btoa method. I found the hexToBase64 method on stackoverflow when trying to find an fix to my problem.</p>
  
  <pre><code>&lt;?php
      $image_data = file_get_contents('test.png');
      $encoded_image = base64_encode($image_data);
      $btoa = "hexToBase64('" . $encoded_image . "')";
  ?&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;title&gt;Experimental Reader&lt;/title&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;canvas id="reader" width="100%" height="100%"&gt;Whoah, your browser is old! You need to update it to use our reader.&lt;/canvas&gt;
      &lt;/body&gt;
  
      &lt;script&gt;
          window.onload = function() {
              var canvas  = document.getElementById("reader");
              var ctx     = canvas.getContext("2d");
              var image   = document.createElement('img');
              image.src='data:image/png;base64,' + &lt;?php echo $btoa; ?&gt;;
              ctx.drawImage(image, 0, 0);
          }
  
          function hexToBase64(str) {
              return btoa(String.fromCharCode.apply(null, str.replace(/\r|\n/g, "").replace(/([\da-fA-F]{2}) ?/g, "0x$1 ").replace(/ +$/, "").split(" ")));
          }
      &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>