Исключение события Javascript TypeError в Chrome

Question

Я пытаюсь добавить событие загрузки FileReader для Chrome, оно отлично работает на Firefox, но выдает исключение TypeError, когда я пытаюсь на Chrome.

Вот мой код:

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

});

Я использую отладчик сценариев Chrome, и в следующей строке выдается исключение:

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 в числа, прежде чем отправлять их в функцию random ().

        // ...
        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'));