获取新更新的图像元素的尺寸

Question

我在获取新更新的图像元素的尺寸时遇到问题。

我正在使用 FileReader 在屏幕上显示图像文件的预览。 文件读取器和相关代码完成执行后，我会检索图像元素的新尺寸，以便相应地调整它们。

在某些浏览器上，信息不会立即更新，我需要添加延迟才能检索新维度。这会导致新图像根据之前图像的尺寸而不是它自己的尺寸进行调整。

如何确定新图片已完全加载？

我原以为FileReader().onloadend 就足够了，但显然不是。我认为这是在 fileReader 加载后执行的，而不是在 DOM 渲染它时执行。 （我说的对吗？）

然后我找到了this question，它建议使用 1 毫秒的超时。这有时有效，但并非总是如此。这似乎取决于浏览器渲染图像的速度（更多可用资源而不是文件大小）。难道我们没有其他方法可以检测这些参数的变化吗？

HTML

<img src="#.png" alt=""/>
<input id="fileInput" type="file" accept='image/*' onChange="loadIt()" />

JS

preview = getElementsByTagName('img')[0];

function loadIt() {

    var imgReader = new FileReader();
    imgReader.readAsDataURL(document.getElementById('fileInput').files[0]); //read from file input

    imgReader.onloadstart = function(e) {
        //
    }
    imgReader.onload = function (imgReaderEvent) {
        if (isImage()) {
            preview.src = imgReaderEvent.target.result;
            //
        }
        else {
            preview.src = 'error.png';
            //
        }
    }
    imgReader.onloadend = function(e) {

        setImage();

        setTimeout(function(){
            setImage();
        }, 1);

        setTimeout(function(){
            setImage();
        }, 2000);
        //
    }
};

function setImage() {
    preview_w = preview.width;
    preview_h = preview.height;
    console.log('dimensions: '+avatar_preview_w+' x '+avatar_preview_h);
    //
};

Answer 1

您应该在您的图像上调用preview.onload 或preview.onloadend 以检测它是否已完成加载。在readAsDataURL 之后，你也调用了你的事件代码应该是这样的

var preview=document.getElementsByTagName("img")[0];
function loadIt() {
   var imgReader=new FileReader();
   imgReader.onload=function(){
   if (isImage()) {
      preview.src = imgReader.result;
      preview.onload=setImage;
   } else {
      preview.src = 'error.png';
      //
   }
   imgReader.readAsDataURL(document.getElementById('fileInput').files[0]); //read from file input
}
function setImage(){
   preview_w = preview.width;
   preview_h = preview.height;
   console.log('dimensions: '+avatar_preview_w+' x '+avatar_preview_h);
}

Answer 2

您在设置.onload 和.onloadend 之前调用了imgReader.readAsDataURL。

我不知道您的 setImage() 正文中的某些变量是什么；但是，从这里开始：

function loadIt() {

    var preview = getElementsByTagName('img')[0],

        setImage = function () {
        preview_w = preview.width;
        preview_h = preview.height;
        console.log('dimensions: '+avatar_preview_w+' x '+avatar_preview_h);
    },

    imgReader = new FileReader();

    imgReader.onloadstart = function(e) {};

    imgReader.onload = function (imgReaderEvent) {
        if (isImage()) {
            preview.src = imgReaderEvent.target.result;
        }
        else {
            preview.src = 'error.png';
        };
    };

    imgReader.onloadend = function(e) {setImage();};

    imgReader.readAsDataURL(document.getElementById('fileInput').files[0]); //read from file input
};