javascript image onload имеет 0 ширину и 0 высоту

Question

Я загружаю изображение из файловой системы, а затем я хочу изменить размер изображения. он отлично работает во всех браузерах, кроме IE (11). Проблема в том, что изображение загружено, но ширина и высота равны 0.

У меня нет вариантов, поэтому я размещаю этот вопрос здесь.

Это код

function getAsImage(readFile, chatboxtitle) { 
    var reader = new FileReader(); 
    reader.readAsDataURL(readFile); 
    reader.onload = addImg; 

} 

function addImg(imgsrc) { 
    var img = document.createElement('img'); 
    img.setAttribute("src", imgsrc.target.result); 

    console.log(img); 

    console.log(img.width + " "+img.height); 

    ... a lot of cool stuff happens here but it doesn't work because width is 0 

} 

ОК, так что консоль печатает изображение, которое, как

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAH0CAYAAAHUIW ... and much more.. > 

Так что образ есть. Все браузеры работают отлично, кроме IE.

Я попытался сыграть с настройкой некоторых свойств IMG, таких как стиль, ширина, но никто не работает.

Примечание: Я не являюсь разработчиком JavaScript. Может быть, я чего-то не хватает. Не найден ли элемент DOM?

UPDATE

Я попытался ответить ниже вчера и она работает. Но сегодня я попробовал решение, и он больше не работает. Попробуйте это fiddle. Он не работает в IE11 на Windows7, но он находится на IE11 в Windows8.

Answer 1

Weird IE поведение. Оказывается, что вам нужно установить SRC с помощью

img.src = src_goes_here 

Не через setAttribute

(function(doc){ 
    doc.getElementById('file').addEventListener('change', readFile); 

    function readFile(ev) { 
     var file = this.files[0], 
      reader; 

     if(file) { 
      reader = new FileReader(); 
      reader.onload = getSize 
      reader.readAsDataURL(file); 
     } 
    } 

    function getSize(ev) { 
     var img = doc.createElement('IMG'); 
     img.src = this.result; //wors in IE11 
     //img.setAttribute('src', this.result); //doesn't work 

     console.log(img.width, img.height); 
    } 
}(document)) 

Demo.

UPD: Некоторые дополнительные исследования показывают, что для того, чтобы сделать IE для расчета размеров изображения когда вы устанавливаете src с помощью img.setAttribute, вам необходимо прикрепить изображение к документу. Например

document.body.appendChild(img); 

Another Demo.