使用文件阅读器获取图像的宽度和高度

Posted

技术标签:

【中文标题】使用文件阅读器获取图像的宽度和高度【英文标题】:Getting width & height of an image with filereader 【发布时间】:2013-03-07 15:18:12 【问题描述】:

我正在构建图像调整大小/裁剪,并且我想在他们以模式(引导程序)对其进行编辑后显示实时预览。这应该工作,我相信,但我只是在 console.log 中得到 0。这需要将原始图像的宽度和高度输入另一个脚本(我将在之后执行此操作,现在只需要它们在 console.log/a 变量中)

function doProfilePictureChangeEdit(e) 
    var files = document.getElementById('fileupload').files[0];
    var reader = new FileReader();
    reader.onload = (function(theFile) 
        document.getElementById('imgresizepreview').src = theFile.target.result;

        document.getElementById('profilepicturepreview').src = theFile.target.result;
      
    );
    reader.readAsDataURL(files);
    var imagepreview = document.getElementById('imgresizepreview');
    console.log(imagepreview.offsetWidth);
    $('img#imgresizepreview').imgAreaSelect(
        handles: true,
        enable: true,
        aspectRatio: "1:1",
        onSelectEnd: preview
    );
    $('#resizeprofilepicturemodal').modal('show');
    ;

【问题讨论】:

如果您的图像相对较大 (>500 KB),您可以使用 EXIF 库。然后,您只需阅读具有宽度和高度标签的 EXIF 标头。 【参考方案1】:

fileChangeEventHeader(fileInput) 
    const oFReader = new FileReader();
    oFReader.readAsDataURL(fileInput.target.files[0]);
    oFReader.onload = (event: any) => 
      var image = new Image();
      image.src = event.target.result;
      image.onload = function () 
        console.log(`width : $image.width px`, `height: $image.height px`);
      ;
    ;
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<input type="file" name="profile_img" accept="image/*" (change)="fileChangeEventHeader($event)"
                  class="input-file">

【讨论】:

【参考方案2】:

这是一个受 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;

【讨论】:

【参考方案3】:

这就是我对 AngularJS 的方式

          fileReader.readAsDataUrl($scope.file, $scope).then(function(result) 
               var image = new Image();
               image.src = result;
               image.onload = function() 
                    console.log(this.width);
               ;
               $scope.imageSrc = result; //all I wanted was to find the width and height


          );

【讨论】:

【参考方案4】:

奥斯汀的解决方案对我来说不起作用,所以我提出一个对我有用的解决方案:

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 有点连线之后,我也这么认为。

【讨论】:

图像加载是异步的并不是连线的。 src 中的所有数据都必须解码,如果 src 是链接,则必须加载并解码为图像,如果也是 base64。所以这很自然:-)【参考方案5】:

您必须等待图像加载。尝试处理.onload 中的元素。

我还简化了将两个元素的来源设置为您应该如何做的过程(使用 jQuery)。

reader.onload = (function(theFile)  
    var image = new Image();
    image.src = theFile.target.result;

    image.onload = function() 
        // access image size here 
        console.log(this.width);

        $('#imgresizepreview, #profilepicturepreview').attr('src', this.src);
    ;
);

【讨论】:

太好了,非常感谢。我误以为文件会通过 readAsDataURL 调用加载。 reader.onload 在文件系统完成从硬盘读取文件时调用。 image.onload 本质上是在图像对象在浏览器中缓冲图像数据时调用的。我明白你怎么可能误解了 onload 函数;不过很高兴能得到帮助。 注意:这仅在您使用“reader.readAsDataURL”时有效。使用“reader.readAsBinaryString”,您必须采用不同的方式。 您最终需要从图像内容中获取数据 uri,因此使用.readAsBinaryString() 是没有意义的。 @AustinBrunkhorst 如果您将相同的二进制字符串发送到服务器(文件上传),这并不是毫无意义的。使用 readAsBinaryString() 比从数据 URL 在 javascript 中手动创建要快得多。

以上是关于使用文件阅读器获取图像的宽度和高度的主要内容,如果未能解决你的问题,请参考以下文章

我可以从android中的uri获取图像文件的宽度和高度吗?

从字节数组数据中获取图像宽度和高度

获取磁盘中图像的实际高度和宽度文件大小[重复]

获取存储在 Amazon S3 上的图像的图像高度和宽度

GAE - 在服务器端获取图像宽度和高度

使用 PHP 获取 PDF 文件的高度和宽度