JS FileReader沒有正確讀取文件

我真的很基本的JS，但我需要完成一個任務是關於改變圖片的選定部分的顏色。這已經很好地完成了我的一頁html + js示例，現在我需要更改Rails應用程序以使用它。JS FileReader沒有正確讀取文件

我的主要問題是，在Rails應用程序中有一個已經放在頁面上的圖像（有很多圖像，單獨編輯），我無法讓FileReader從它讀取。

它會拋出中間'if'的情況 - '這個瀏覽器似乎不是......'這種情況到底意味着什麼？我在這裏找到了一個解釋：Link但我不明白。我可以將一張給定的圖片加載到畫布上，但它仍然給我留言。哦，imgfile'stype是未定義的。爲什麼？...

下面的代碼並不代表我的整個代碼。

function loadImage() { 
      var input, file, fr, img, x; 

      if (typeof window.FileReader !== 'function') { 
       write("The file API isn't supported on this browser yet."); 
       return; 
      } 

      input = document.getElementById('imgfile'); 
      if (!input) { 
       write("Um, couldn't find the imgfile element."); 
      } 
      else if (!input.files) { 
       write("This browser doesn't seem to support the `files` property of file inputs."); 
       x = document.getElementById('imgfile').type; 
       write(x); 
      } 
      else if (!input.files[0]) { 
       write("Please select a file before clicking 'Load'"); 
      } 
      else { 
       file = input.files[0]; 
       fr = new FileReader(); 
       fr.onload = createImage; 
       fr.readAsDataURL(file); 
      }

我編輯過這篇文章，因爲它是基於錯誤的假設。

來源

2015-07-01 SzczesliwyCzlowiek

FileReader應該從文件系統讀取文件。你下一步要做：

var img = new Image(); 
var canvas = document.createElement("canvas"); 
var ctx = canvas.getContext('2d'); 
img.onload = function(){ 
    ctx.drawImage(this, 0, 0); 
    ctx.toDataURL(); // <--- Here is your source of an image. 
}; 
img.src = document.getElementById('imgfile').src;

不知道，爲什麼你需要閱讀該網址您已有的圖片。

來源

2015-07-01 12:56:19 intale

感謝您的迴應，但它竟然是另一個問題。 – SzczesliwyCzlowiek

我回答自己，因爲我找到了問題的根源 - 的FileReader可以由用戶上傳的文件只經營...

來源

2015-07-03 17:12:47 SzczesliwyCzlowiek

JS FileReader沒有正確讀取文件

回答

相關問題