Изображение в base64 отображается только в хроме. FileReader+Canvas

Question

Я использую FileReader + Canvas для ресайза и отображения изображения. Не отображается превью изображения в IE и Firefox (отображается только в хроме), хотя если поставить alert перед записью base64 в src все работает корректно во всех браузерах. setTimeout и img.onload не помогает, поэтому сомневаюсь что это из-за тайминга.

function preview(file, area) { //принимает с input type="file" данные и область в которую отображать данные
        if (file.type.match(/image.*/)) {
            var className = area.className;
            var reader = new FileReader();
            reader.addEventListener("load", function(event) {
                var img = document.createElement("img");
                img.src = event.target.result; // на этом этапе отображает корректно, но без ресайза
                //alert(1); // с этим алёртом все работает
                img.alt = file.name;
                img.className = "takeImg";
                area.innerHTML = "";
                if( className.indexOf('first') != -1 ) {
                    img = cropImg(img);
                    area.appendChild(img);
                } else if ......... и.т.д

function cropImg(img) {
    var canvas = document.createElement("canvas");
    var needW = 1000;
    var needH = 622;
    var w = (img.naturalWidth - needW)/2;
    var h = (img.naturalHeight - needH)/2;
    canvas.width = needW;
    canvas.height = needH;
    var ctx = canvas.getContext('2d');
    for (var i = 5; i > 1.1; i -= 0.05) {
        if((img.naturalWidth >= (needW * i)) && (img.naturalHeight >= (needH * i))) {
            ctx.drawImage(img, 0,0,(needW * i),(needH * i),0,0,1000,622);
            break;
        } else {
            ctx.drawImage(img, w,h,1000,622,0,0,1000,622);
        }
    }
    var dataURL = canvas.toDataURL("image/png");
    img.src = dataURL;
    return img;
}