How can I solve "Uncaught ReferenceError: blob is not defined"?

Question

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?

Mortarboard

did u attached the script canvas-to-blob.min.js? – Sprayberry

@Se0ng11, Yes. You can see it in my jsfiddle. It had loaded – Mortarboard

kinda confuse, the jsfiddle that you attached is working, right? and i not see the code that you write inside the jsfiddle, so is the jsfiddle and the question is totally 2 different thing? – Sprayberry

@Se0ng11, The jsffidle works. But after I add the filereader code, it will error. You try to read my whole question. I have described it in detail – Mortarboard

Why not use the built-in toBlob() on canvas element and URL.createObjectURL() instead? cleaner and much faster than going through all these conversion steps. – Lees

@K3N, I need to save the image that has fixed orientation in folder too – Mortarboard

@Se0ng11, I update my question – Mortarboard

So first, why do you want to use this FileReader exactly? Then your error is simply an other async+scopes one: your filereader part is executed directly, and for its scope, blob doesn't exists (not sure what you wanted it to be). So to fix this, simply move your code in the img.toBLob's callback: jsfiddle.net/q93c7Lpf/2 But if what you want is to display the image, then don't use a FileReader at all, simply use URL.createObjectURL. jsfiddle.net/q93c7Lpf/4 – Nofretete

@Kaiido, Because I want to display preview the image that had fix orientation. The process to display preview image like this : jsfiddle.net/hardiksondagar/t6UP5. So it's in the form of img tags. no canvas tag – Mortarboard

@SuccessMan, then as I said at the end of my comment, don't use a FileReader, use URL.createObjectURL jsfiddle.net/q93c7Lpf/4 – Nofretete

@Kaiido, Okay. I will try it first – Mortarboard

Is that code failing for you on every image you use? What browser are you using? – Froe

@Kaiido, Whether the process can be made like this : jsfiddle.net/hardiksondagar/t6UP5 ? So, I already have an img tag. When uploading the image, it just change value of the src – Mortarboard

@bluehipy, I try your jsfiddle, no error. But that's not my intention. Try to read the comments above. That is what I mean – Mortarboard

Forget about FileReader.readAsDataURL it should only be used when you want to generate standalones documents. For any other cases, use either the Blob directly, or a blobURI. jsfiddle.net/t6UP5/640 – Nofretete

@Kaiido, You are great. It works. Thank you very much. It helped me :) – Mortarboard

Answer 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?

Padron

In this case the error will be triggered by the reader.onload and will be something like GET data: net::ERR_INVALID_URL. His problem is catching the exception of image.onerror. – Froe

@Froe where did you saw that it's his problem? Your problem is that you didn't sent a valid image in the file input. – Nofretete

That is his problem. Or one of them. – Froe

@Froe not at all. – Nofretete

@Nofretete & Shyam His js fiddle breaks only when the file user selects is a broken image or not an image at all. If you find another situation ... do describe. – Froe

His fiddle breaks with any file type, an error Uncaught ReferenceError: blob is not defined is thrown in the console, because of what I said here. His problem is with the FileReader part, he said it in the question if you dare read it. (Now I'm wondering if you tried to fix the one he said works : jsfiddle.net/q93c7Lpf) – Nofretete

I misunderstood the requirement then. i saw he needed to convert it into an image tag from canvas. So i gave this answer which by passed using blob bug. – Padron