如何等到 image.src 在 image.onload 事件函数中设置？

Question

在我的新 image() 对象的浏览器 javascript 中，对于 onload 事件，我首先在用户选择图像文件后设置 image.src ；然后读取图像对象的大小。但似乎读取发生在正确设置 src 之前。我碰巧找到了两次调用该函数的修复方法。但是这个解决方案似乎是一个非常糟糕的主意。请让我知道如何以标准方式修复它。我的环境接受打字稿。var imgLoaded=false; var file = document.getElementById("fileInput").files[0];      for(let i=0;i<2;i++){              call2(file);         }         function call2(file) {      var reader = new FileReader();      reader.readAsDataURL(file);      reader.onload = function () {          if(!imgLoaded){               imgLoaded=true;   img.src=(reader.result).toString();}         else{        console.log(img.width);      }}

Answer 1

在一种方式中，您可以替换 file = document.getElementById("fileInput").files[0];为file = event.target.files[0] 并在 call2 中使用它，您还应该将事件传递给 call2

例如：在 html 中： <input type="file" onchange="call2(event)" />，然后在 js 中function call2(e){let file = e.target.files[0] ... }

Answer 2

await (img.src= await (reader.result).toString())

也可以。无需调用控制台。

Answer 3

我自己至少找到了一个更好的解决方案。虽然我不知道这是否是一个标准。

 var file = document.getElementById("fileInput").files[0];

          call2(file);

      

    function call2(file) {

      var reader = new FileReader();

      reader.readAsDataURL(file);

      reader.onload =async function () {

         img.src= await (reader.result).toString();

         console.log(await img.width);

      }}