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?

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? — Se0ng11, Sep 13 '17 at 08:09
@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 — moses toh, Sep 13 '17 at 08:14
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. — , Sep 13 '17 at 08:15
@K3N, I need to save the image that has fixed orientation in folder too — moses toh, Sep 13 '17 at 08:17
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: https://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`. https://jsfiddle.net/q93c7Lpf/4/ — Kaiido, Sep 13 '17 at 08:39
@Kaiido, Because I want to display preview the image that had fix orientation. The process to display preview image like this : http://jsfiddle.net/hardiksondagar/t6UP5/. So it's in the form of img tags. no canvas tag — moses toh, Sep 13 '17 at 08:48
@SuccessMan, then as I said at the end of my comment, don't use a FileReader, use `URL.createObjectURL` https://jsfiddle.net/q93c7Lpf/4/ — Kaiido, Sep 13 '17 at 08:50
Is that code failing for you on every image you use? What browser are you using? — bluehipy, Sep 13 '17 at 09:01
@Kaiido, Whether the process can be made like this : http://jsfiddle.net/hardiksondagar/t6UP5/ ? So, I already have an img tag. When uploading the image, it just change value of the src — moses toh, Sep 13 '17 at 09:18
@bluehipy, I try your jsfiddle, no error. But that's not my intention. Try to read the comments above. That is what I mean — moses toh, Sep 13 '17 at 09:21
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. http://jsfiddle.net/t6UP5/640/ — Kaiido, Sep 13 '17 at 09:21
@Kaiido, You are great. It works. Thank you very much. It helped me :) — moses toh, Sep 13 '17 at 09:33

score 0 · Answer 1 · answered Sep 13 '17 at 08:39

0

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?

answered Sep 13 '17 at 08:39

Shyam Babu

1,069
7
14

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. – bluehipy Sep 13 '17 at 08:45
@bluehipy where did you saw that it's his problem? Your problem is that you didn't sent a valid image in the file input. – Kaiido Sep 13 '17 at 08:47
**That** is his problem. Or one of them. – bluehipy Sep 13 '17 at 08:50
@bluehipy not at all. – Kaiido Sep 13 '17 at 08:51
@Kaiido & 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. – bluehipy Sep 13 '17 at 08:55
[His fiddle](https://jsfiddle.net/q93c7Lpf/1/) breaks with any file type, an error *Uncaught ReferenceError: blob is not defined* is thrown in the console, because [of what I said here](https://stackoverflow.com/questions/46192069/how-can-i-solve-uncaught-referenceerror-blob-is-not-defined#comment79347631_46192069). 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 : https://jsfiddle.net/q93c7Lpf/) – Kaiido Sep 13 '17 at 08:58
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. – Shyam Babu Sep 13 '17 at 09:23

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

1 Answers1

Linked