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

演示和完整的代码是这样的：https://jsfiddle.net/q93c7Lpf/如何解决“未捕获的ReferenceError：blob未定义”？

它的工作原理

它使用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/

我该如何解决这个问题？

来源

2017-09-13 Success Man

是否附加脚本'canvas-to-blob.min.js'？ – Se0ng11

@ Se0ng11，是的。你可以在我的jsfiddle中看到它。它装了 –

有点混乱，你附带的jsfiddle工作吧？我没有看到你写在jsfiddle里面的代码，所以jsfiddle和这个问题完全是两回事吗？ – Se0ng11

您可以直接将文件对象

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

这是你在找什么？

来源

2017-09-13 08:39:32

在这种情况下，错误将被'reader.onload'被触发，并会像'GET数据：网:: ERR_INVALID_URL'。他的问题是捕捉image.onerror的异常。 – bluehipy

@bluehipy你在哪里看到这是他的问题？您的问题是您没有在文件输入中发送有效的图像。 – Kaiido

**这是他的问题。或者其中之一。 – bluehipy

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

回答

相关问题