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元素？

更新

我昨天尝试了下面的答案，它正在运作。但我今天尝试了解决方案，它已经不再适用了。试试这个fiddle。它在Windows7上的IE11中不起作用，但它在Windows8上的IE11上。

Answer 1

奇怪的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：一些额外的研究表明，为了在使用img.setAttribute设置src时让IE计算图像大小，您需要将图像实际附加到文档中。例如

document.body.appendChild(img);

Another Demo.

javascript图像onload有0宽度和0高度

1 个答案: