无法在javascript中获取图像的高度和宽度

Question

我试图通过javascript来检索图像的实际高度和宽度。 在我的例子中使用的图像源是BLOB，一旦用户插入文件就会生成它。

继承我的代码：

    var img = document.createElement('img');
    var blob = URL.createObjectURL(e.target.files[0]);
    img.src = blob;
    console.log(img);
    var w = img.width;
    var h = img.height;
    console.log("NEW IMAGE width", w);
    console.log("NEW IMAGE height: ", h);

以下是日志：

<img src=​"blob:​http%3A/​/​localhost%3A3000/​af3e5a35-8c1c-40b5-ad5a-379c3ab1ec1d">​
NEW IMAGE width 0
NEW IMAGE height:  0

blob是正确的，因为我可以在浏览器中查看图像。

当我在控制台中使用相同的blob创建另一个图像并尝试检索高度和宽度时，一切正常。

但是当我尝试在我的onChange事件表单中运行它时输入我只得到0的高度和宽度。

Answer 1

你应该在加载图像后获得尺寸：

    img.onload = getSize;//measure after loading or you will get 0

Answer 2

首先尝试加载它：

img.onload(function() {
    var w = img.width;
    var h = img.height;

    console.log("NEW IMAGE width", w);
    console.log("NEW IMAGE height: ", h);
});

Answer 3

图像加载后需要拍摄宽度和高度。因此需要花一些时间来加载图像。这样你总是会得到零大小。在onload事件中获取宽度/高度。

var img = document.createElement('img');
    var blob = URL.createObjectURL(e.target.files[0]);
    img.src = blob;
    img.onload = function() {
      var w = img.width;
      var h = img.height;
      console.log("NEW IMAGE width", w);
      console.log("NEW IMAGE height: ", h);
    }

Answer 4

如何在blob objeact中获取图像的高度和宽度？ 例如：

$(function(){
	$("input[name=file_name]").on('change',function(){
		var url = window.URL || window.webkitURL || window.mozURL;
		var src = url.createObjectURL($(this)[0].files[0]);
		$("#box").html('<img src="'+src+'">');
		$("#box img").attr('width','100');
		$('img')[0].onload = function() {
		    console.log($(this).height()); //get image height by jQuery
		    console.log($(this)[0].height)// get image height by javascript
		    console.log($(this)[0].naturalHeight);//get real height by javascript
		    /**
		     * if you want to get the image's width,you can use following code :
		     * $(this).width();
		     * $(this)[0].width;
		     * $(this)[0].naturalWidth;
		     */
		};
	})
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form method="post" enctype="multipart/form-data">
  <input type="file" name="file_name">
</form>

<div id="box"></div>