ChromeのJavascript TypeErrorイベント例外

Question

ChromeでFileReader onloadイベントを追加しようとしていますが、Firefoxでうまく動作しますが、Chromeで試してみるとTypeError例外がスローされます。

は、ここに私のコードです：

function random(min, max) 
{ 
    return Math.floor(Math.random() * (max - min + 1) + min); 
} 

function handleDrop(event) { 
    var dt = event.dataTransfer, 
     files = dt.files, 
     count = files.length; 

    event.stopPropagation(); 
    event.preventDefault(); 

    for (var i = 0; i < count; i++) 
    { 
     var fileReader = new FileReader(); 

     fileReader.addEventListener("loadend", function(e) { 
      xn = random(0, $('canvas').attr('width')); 
      yn = random(0, $('canvas').attr('height')); 
      widthn = random(100, 200); 

      $("canvas").drawImage({ 
       source: e.target.result, 
       fromCenter: false, 
       x: xn, 
       y: yn, 
       width: widthn 
      }); 

      delete e.target.result; 
     } , false); 

     fileReader.readAsDataURL(files[i]); 
    } 
} 

$(document).ready(function() 
{ 
    var dropContainer = document.getElementById("content"); 

    dropContainer.addEventListener("dragenter", function(event){event.stopPropagation();event.preventDefault();}, false); 
    dropContainer.addEventListener("dragover", function(event){event.stopPropagation();event.preventDefault();}, false); 
    dropContainer.addEventListener("drop", handleDrop, false); 

}); 

私はクロームスクリプトデバッガを使用していますし、例外は、次の行で投げている：

fileReader.addEventListener("loadend", function(e) { 

私はChromeでこれを修正するために何ができますか？

Answer 1

まあ、明らかに、FileReaderはaddEventListenerを持っていません。 （TypeError: Object #<FileReader> has no method 'addEventListener'）

用途：

var fileReader = new FileReader(); 

fileReader.onloadend = function (e) { 
    xn = random(0, $('canvas').attr('width')); 
    yn = random(0, $('canvas').attr('height')); 
    widthn = random(100, 200); 

    $("canvas").drawImage({ 
     source: e.target.result, 
     fromCenter: false, 
     x: xn, 
     y: yn, 
     width: widthn 
    }); 
}; 

Answer 2

「ランダム（）」機能に送る前に、CSSのプロパティを数値に明示的に変換していることを確認してください。

 // ... 
     xn = random(0, ~~$('canvas').attr('width')); 
     yn = random(0, ~~$('canvas').attr('height')); 

もちろん、parseInt()を使用できます。これは単なる例です。その代わり：

 // ... 
     xn = random(0, parseInt($('canvas').attr('width'), 10)); 
     yn = random(0, parseInt($('canvas').attr('height'), 10)); 

はまた当然の変数はvarで宣言する必要があります。

 // ... 
     var xn = random(0, ~~$('canvas').attr('width')); 
     var yn = random(0, ~~$('canvas').attr('height'));