Javascript 获取宽度&；使用filereader时图像的高度

我正在构建一个图像调整大小/裁剪，我想在他们在模式（引导）中编辑后显示一个实时预览。我相信这应该是可行的，但我在console.log中只得到了0。这需要将原始图像的宽度和高度输入到另一个脚本中（之后我会这样做，现在只需要在console.log/a变量中使用它们）

---

您必须等待图像加载。尝试在

.onload

中处理元素

我还简化了将这两个元素的源代码设置为应该如何操作（使用jQuery）的过程

---

对我来说，奥斯汀的解决方案不起作用，因此我提出了一个对我有效的解决方案：

var reader = new FileReader;

reader.onload = function() {
    var image = new Image();

    image.src = reader.result;

    image.onload = function() {
        alert(image.width);
    };

};

reader.readAsDataURL(this.files[0]);

---

如果您发现赋值

image.src=reader.result发生在image.onload之后，我也这么认为。
这是我对AngularJS的方式


fileReader.readAsDataUrl（$scope.file，$scope）.then（函数（结果）{
var image=新图像（）；
image.src=结果；
image.onload=函数（）{
console.log（这个.width）；
};
$scope.imageSrc=result；//我只想找到宽度和高度
});以下是一个受Austin Brunkhorst启发的答案，其中包含一个回调函数，用于确定图像大小，以防您想在代码中的其他地方重用该函数

fileControl
被假定为jQuery元素

function didUploadImage(fileControl) {      
   // Render image if file exists.
   var domFileControl = fileControl[0];
   if (domFileControl.files && domFileControl.files[0]) {
      // Get first file.
      var firstFile = domFileControl.files[0];

      // Create reader.
      var reader = new FileReader();

      // Notify parent when image read.
      reader.onload = function(e) {
         // Get image URL.
         var imageURL = reader.result;

        // Get image size for image.
        getImageSize(imageURL, function(imageWidth, imageHeight) {
            // Do stuff here.
        });
      };

      // Read image from hard disk.
      reader.readAsDataURL(firstFile);

      // Print status.
      console.log("Uploaded image: " + firstFile.name);
   }
}


function getImageSize(imageURL, callback) {      
   // Create image object to ascertain dimensions.
   var image = new Image();

   // Get image data when loaded.
   image.onload = function() {      
      // No callback? Show error.
      if (!callback) {
         console.log("Error getting image size: no callback. Image URL: " + imageURL);

      // Yes, invoke callback with image size.
      } else {
         callback(this.naturalWidth, this.naturalHeight);
      }
   }

   // Load image.
   image.src = imageURL;
}


fileChangeEventHeader（fileInput）{
读卡器常数=新文件读卡器（）；
readAsDataURL（fileInput.target.files[0]）；
oFReader.onload=（事件：any）=>{
var image=新图像（）；
image.src=event.target.result；
image.onload=函数（）{
log（`width:${image.width}px`，`height:${image.height}px`）；
};
};
}

太好了，非常感谢。我有一种错误的印象，即文件将无法通过readAsDataURL调用加载。
reader.onload
是在文件系统从硬盘读取完文件后调用的
image.onload本质上是在图像对象在浏览器中缓冲了图像数据时调用的。我知道你怎么会误解onload函数；很高兴能得到帮助。注意：只有在使用“reader.readAsDataURL”时，此选项才有效。使用“reader.readAsBinaryString”时，您必须采用另一种方式。您最终需要从图像内容中获取数据uri，因此使用
。readAsBinaryString（）
是毫无意义的。@AustinbrunkHost如果您将相同的二进制字符串发送到服务器（文件上载），则并非毫无意义。使用
readAsBinaryString（）
比从数据URL在javascript中手动创建要快得多。图像加载不是异步的。必须对src中的所有数据进行解码，如果src是链接，则必须将其加载并解码到图像（如果也是base64）。所以这很自然：-）如果图像相对较大（>500KB），可以使用EXIF库。然后您只需读取带有宽度和高度标记的EXIF标头。
var reader = new FileReader;

reader.onload = function() {
    var image = new Image();

    image.src = reader.result;

    image.onload = function() {
        alert(image.width);
    };

};

reader.readAsDataURL(this.files[0]);

function didUploadImage(fileControl) {      
   // Render image if file exists.
   var domFileControl = fileControl[0];
   if (domFileControl.files && domFileControl.files[0]) {
      // Get first file.
      var firstFile = domFileControl.files[0];

      // Create reader.
      var reader = new FileReader();

      // Notify parent when image read.
      reader.onload = function(e) {
         // Get image URL.
         var imageURL = reader.result;

        // Get image size for image.
        getImageSize(imageURL, function(imageWidth, imageHeight) {
            // Do stuff here.
        });
      };

      // Read image from hard disk.
      reader.readAsDataURL(firstFile);

      // Print status.
      console.log("Uploaded image: " + firstFile.name);
   }
}


function getImageSize(imageURL, callback) {      
   // Create image object to ascertain dimensions.
   var image = new Image();

   // Get image data when loaded.
   image.onload = function() {      
      // No callback? Show error.
      if (!callback) {
         console.log("Error getting image size: no callback. Image URL: " + imageURL);

      // Yes, invoke callback with image size.
      } else {
         callback(this.naturalWidth, this.naturalHeight);
      }
   }

   // Load image.
   image.src = imageURL;
}