设置图像 SRC 在火狐浏览器上不起作用

setting image src is not working on Firefox

本文关键字：不起作用 火狐浏览器 图像 SRC 设置      更新时间：2023-09-26

我将获取所选图像的 URL 数据并将其放入创建的图像对象中。我有 Url 数据，但这个imgOrg.src = imgSrc;不适用于 FireFox。知道为什么吗？

window.onload = function() {
  var reader, imgSrc, imgOrg;
  if (window.FileReader) {
    reader = new FileReader();
    reader.onloadend = function(e) {
      imgSrc = e.target.result;
      console.info(imgSrc);
    };
  }
  var avatarInput = document.querySelector('#imageFile');
  avatarInput.addEventListener('change', function(e) {
    console.info(imgOrg);
    imgOrg = {};
    var element = e.target;
    imgSrc = '';
    if (element.value !== '') {
      reader.readAsDataURL(e.target.files[0]);
      setTimeout(function() {
        imgOrg = new Image();
        imgOrg.src = imgSrc;
        console.log("imgOrg.src= " +
          imgOrg.src);
        console.log(imgSrc);
        console.log(imgOrg.width);
        console.log(imgOrg.height);
        var ratio = imgOrg.width / imgOrg.height;
        var fWidth, fHeight;
        if (ratio >= 1) {
          fWidth = 300;
          fHeight = (1 / ratio) * 300;
        }
      }, 1000);
    }
  }, false);
};
<input id="imageFile" type="file">

主要问题是：我试图在加载完成之前获取图像的宽度和高度。创建图像对象后，我将其余代码放入imgOrg.onload 

window.onload = function() {
  var reader, imgSrc, imgOrg;
  if (window.FileReader) {
    reader = new FileReader();
    reader.onloadend = function(e) {
      imgSrc = e.target.result;
      console.info(imgSrc);
    };
  }
  var avatarInput = document.querySelector('#imageFile');
  avatarInput.addEventListener('change', function(e) {
    imgOrg = {};
    var element = e.target;
    imgSrc = '';
    if (element.value !== '') {
      reader.readAsDataURL(e.target.files[0]);
      setTimeout(function() {
        imgOrg = new Image();
        imgOrg.src = imgSrc;
        imgOrg.onload = function() {
          console.log("imgOrg.src= " +
            imgOrg.src);
          console.log(imgSrc);
          console.log(imgOrg.width);
          console.log(imgOrg.height);
          var ratio = imgOrg.width / imgOrg.height;
          var fWidth, fHeight;
          if (ratio >= 1) {
            fWidth = 300;
            fHeight = (1 / ratio) * 300;
          }
        }
      }, 1000);
    }
  }, false);
};
<input id="imageFile" type="file">

相关文章：