我试图通过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的高度和宽度。
答案 0 :(得分:6)
答案 1 :(得分:1)
首先尝试加载它:
img.onload(function() {
var w = img.width;
var h = img.height;
console.log("NEW IMAGE width", w);
console.log("NEW IMAGE height: ", h);
});
答案 2 :(得分:1)
图像加载后需要拍摄宽度和高度。因此需要花一些时间来加载图像。这样你总是会得到零大小。在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);
}
答案 3 :(得分:1)
如何在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>