Question

我在使用文件阅读器阅读尺寸时遇到问题。尝试了各种浏览器和文件，宽度总是回到0。

    var fileReader = new FileReader();
    var img = new Image();

    fileReader.onload = function(event) {
        img.src = event.target.result;
        console.log(img.width);

    };

    fileReader.onerror = function() {

        //handle error
    };

    fileReader.readAsDataURL(file);

在拖放事件中，文件var从以下内容中循环出来：

e.originalEvent.dataTransfer.files

Answer 1

也许你的图片对象没有加载试试这个：

img.onload = function () {console.log(img.width)}

Answer 2

我认为在将二进制数据分配给Image时会出错。

分配图片：

fileReader.onload = function(e) {
    var img = new Image();
    img.src = fileReader.result;
}

演示：

document.getElementById('img').addEventListener('change', function(e) {
    var file = this.files[0];
    var fileReader = new FileReader();
    var img = new Image();

    fileReader.onload = function(event) {
        img.src = fileReader.result;
        
        img.onload = function() {
            console.log(img.width);
        }

        document.getElementById('result').appendChild(img);
    };
    fileReader.readAsDataURL(file);
})

<input id="img" type="file">
<div id="result"></div>

请参阅codepen demo或jsfiddle

使用文件阅读器读取图像的宽度？

2 个答案: