如何解决“未捕获的 ReferenceError：未定义 blob”？答案

【问题标题】：How can I solve "Uncaught ReferenceError: blob is not defined"?如何解决“未捕获的 ReferenceError：未定义 blob”？
【发布时间】：2017-09-13 08:01:38
【问题描述】：

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

有效

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

<canvas width="660" height="1100" style="width: 600px; height: 1000px;"></canvas>

我想把它改成标签img。所以我想使用文件阅读器。

我在这里读到html image blob to base64 和Convert blob to 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(...)之后添加代码，然后我运行，我在控制台上看到这样的错误：

Uncaught ReferenceError: blob is not defined

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

我该如何解决这个问题？

【问题讨论】：

你附上了脚本canvas-to-blob.min.js吗？
为什么不在画布元素和 URL.createObjectURL() 上使用内置的 toBlob() 呢？比完成所有这些转换步骤更干净、更快捷。
那么首先，你为什么要使用这个 FileReader 呢？那么您的错误只是另一个 async+scopes 错误：您的 filereader 部分是直接执行的，并且对于它的范围，blob 不存在（不确定您想要它是什么）。所以要解决这个问题，只需将您的代码移动到img.toBLob 的回调中：jsfiddle.net/q93c7Lpf/2 但是如果您想要显示图像，那么根本不要使用 FileReader，只需使用URL.createObjectURL。 jsfiddle.net/q93c7Lpf/4
@SuccessMan，然后正如我在评论末尾所说，不要使用 FileReader，使用 URL.createObjectURL jsfiddle.net/q93c7Lpf/4
忘记FileReader.readAsDataURL，它只应在您想要生成独立文档时使用。对于任何其他情况，请直接使用 Blob 或 blobURI。 jsfiddle.net/t6UP5/640

标签： javascript jquery html image-uploading filereader

【解决方案1】：

可以直接传递文件对象

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

这是你要找的吗？

【讨论】：

在这种情况下，错误将由reader.onload 触发，类似于GET data: net::ERR_INVALID_URL。他的问题是捕捉到 image.onerror 的异常。
@bluehipy 你从哪里看出这是他的问题？您的问题是您没有在文件输入中发送有效的图像。
那是他的问题。或者其中之一。
@bluehipy 一点也不。
@Kaiido & Shyam 只有当用户选择的文件是损坏的图像或根本不是图像时，他的 js 小提琴才会中断。如果你发现另一种情况......请描述一下。