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?

回答1:

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?

来源：https://stackoverflow.com/questions/46192069/how-can-i-solve-uncaught-referenceerror-blob-is-not-defined