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

IT技术 javascript dom filereader
2021-03-03 02:14:41

我正在构建一个图像调整大小/裁剪，我想在他们在模式（引导程序）中编辑它后显示实时预览。我相信这应该可行，但我在 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');
    };
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);
    };
});
注意：这仅在您使用“reader.readAsDataURL”时有效。使用“reader.readAsBinaryString”，您必须采用不同的方式。
2021-04-20 02:14:41
您最终需要从图像内容中获取数据 uri，因此使用.readAsBinaryString()毫无意义。
2021-04-25 02:14:41
@AustinBrunkhorst 如果您将相同的二进制字符串发送到服务器（文件上传），这并不是毫无意义的。usingreadAsBinaryString()比从数据 URL 在 javascript 中手动创建它要快得多。
2021-04-27 02:14:41
reader.onload当文件系统完成从硬盘读取文件时调用。image.onload本质上是当图像对象已在浏览器中缓冲图像数据时调用。我明白你怎么可能误解了 onload 函数；很高兴得到帮助。
2021-04-29 02:14:41
太好了，非常感谢。我的错误印象是这些文件会加载 readAsDataURL 调用。
2021-05-17 02:14:41

对我来说，Austin 的解决方案不起作用，所以我介绍了一个对我有用的：

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。所以这是很自然的:-)
2021-04-23 02:14:41

这是一个受 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) {
    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">

这是我对 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


          });

其它你可能感兴趣的问题
上一篇自动编号表格行？ 下一篇Angular.js：在页面加载时设置元素高度