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

您在设置imgReader.readAsDataURL和.onload之前致电.onloadend。

我不知道你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
};

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

2 个答案: