크롬에서 자바 유형 오류 이벤트 예외가 발생했습니다.

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) { 

내가 크롬에서이 문제를 해결하기 위해 무엇을 할 수 있는가?

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

"random()"함수로 보내기 전에 명시 적으로 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'));