如何解決「未捕獲的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未定義」？

回答

相關問題