Q: How can I solve "Uncaught ReferenceError: blob is not defined"? Demo and full code like this : https://jsfiddle.net/q93c7Lpf/
It works
It uses document.body.appendChild(img); to display the image. And the result like this:
<canvas width="660" height="1100" style="width: 600px; height: 1000px;"></canvas>

I want to change it to be tag img. So I want to use file reader.
I read here html image blob to base64 and Convert blob to base64
And then I try implement it
I add this 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);

I add the code after loadImage(...), then I run, I see on the console exist error like this:

Uncaught ReferenceError: blob is not defined

Demo and full code like this : https://jsfiddle.net/q93c7Lpf/1/
How can I solve this problem?

A: You can directly pass the file object 
document.getElementById('file-input').onchange = function (e) {
  var dataURI;
  var reader = new FileReader();
  reader.onload = function(){
    dataURI = this.result;
    var image = new Image();
    image.src=dataURI;
    document.body.appendChild(image);
  };
  reader.readAsDataURL(e.target.files[0]);
};

Is this what you are looking for?
