如何解决“未捕获的ReferenceError:未定义Blob"? [英] How can I solve "Uncaught ReferenceError: blob is not defined"?

问题描述

演示和完整代码如下: https://jsfiddle.net/q93c7Lpf/

Demo and full code like this : https://jsfiddle.net/q93c7Lpf/

有效

它使用document.body.appendChild(img);来显示图像.结果是这样的:

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>

我想将其更改为标签img.所以我想使用文件阅读器.

I want to change it to be tag img. So I want to use file reader.

我在这里阅读了 html图像斑点到base64 和然后我尝试实现它

我添加以下代码:

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);

我在loadImage(...)之后添加代码，然后运行，我在控制台上看到这样的错误:

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

未捕获的ReferenceError:未定义blob

Uncaught ReferenceError: blob is not defined

演示和完整的代码如下: https://jsfiddle.net/q93c7Lpf/1/

Demo and full code like this : https://jsfiddle.net/q93c7Lpf/1/

我该如何解决这个问题?

How can I solve this problem?

推荐答案

您可以直接传递文件对象

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]);
};

这是您要寻找的吗?

这篇关于如何解决“未捕获的ReferenceError:未定义Blob"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！