title: How can I solve "Uncaught ReferenceError: blob is not defined"?
body: <p>Demo and full code like this : <a href="https://jsfiddle.net/q93c7Lpf/" rel="nofollow noreferrer">https://jsfiddle.net/q93c7Lpf/</a></p>
  
  <p>It works</p>
  
  <p>It uses <code>document.body.appendChild(img);</code> to display the image. And the result like this:</p>
  
  <pre><code>&lt;canvas width="660" height="1100" style="width: 600px; height: 1000px;"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>I want to change it to be tag img. So I want to use file reader.</p>
  
  <p>I read here <a href="https://stackoverflow.com/questions/37130010/html-image-blob-to-base64">html image blob to base64</a> and <a href="https://stackoverflow.com/questions/18650168/convert-blob-to-base64">Convert blob to base64</a></p>
  
  <p>And then I try implement it</p>
  
  <p>I add this code : </p>
  
  <pre><code>var dataURI;
  var reader = new FileReader();
  reader.onload = function(){
    // here you'll call what to do with the base64 string result
    dataURI = this.result;
    console.log(dataURI);
  };
  reader.readAsDataURL(blob);
  </code></pre>
  
  <p>I add the code after <code>loadImage(...)</code>, then I run, I see on the console exist error like this:</p>
  
  <blockquote>
    <p>Uncaught ReferenceError: blob is not defined</p>
  </blockquote>
  
  <p>Demo and full code like this : <a href="https://jsfiddle.net/q93c7Lpf/1/" rel="nofollow noreferrer">https://jsfiddle.net/q93c7Lpf/1/</a></p>
  
  <p>How can I solve this problem?</p>