Javascript可以访问本机图像大小吗？_Javascript_Jquery_Image_Size

Javascript可以访问本机图像大小吗？

javascript jquery image

Javascript可以访问本机图像大小吗？,javascript,jquery,image,size,Javascript,Jquery,Image,Size,我正在编写一个jQuery函数，其中我希望访问图像的本机大小和页面上为其指定的大小。我想为每个设置一个变量这是怎么做到的？编辑-新想法。。。请参见原始答案看我的解决方案是编写一个web服务来获取/下载图像，然后获取其分辨率并将其返回为{width:x，height:y}。然后，使用$.ajax或等效工具调用它来检索此文件或者，您可以使用将图像添加到隐藏的div // e.g. don't set width and height $("#hiddendiv").html("<im

我正在编写一个jQuery函数，其中我希望访问图像的本机大小和页面上为其指定的大小。我想为每个设置一个变量

这是怎么做到的？

编辑-新想法。。。请参见

原始答案

看

我的解决方案是编写一个web服务来获取/下载图像，然后获取其分辨率并将其返回为{width:x，height:y}。然后，使用$.ajax或等效工具调用它来检索此文件

或者，您可以使用将图像添加到隐藏的div

// e.g. don't set width and height
$("#hiddendiv").html("<img src='theurl'>");

//例如，不要设置宽度和高度
$（“#hiddendiv”）.html（“”）；

然后获取div的宽度/高度，尽管我还没有尝试过。

现代浏览器当我在2009年写下这个答案时，浏览器的情况就大不相同了。如今，任何合理的现代浏览器都支持使用

img.naturalWidth

和

img.naturalHeight

。看看他的答案

与超旧浏览器兼容的旧版答案这应该起作用：

var img = $('#imageid')[0]; //same as document.getElementById('imageid');
var width = img.naturalWidth;
var height = img.naturalHeight;

naturalWidth和naturalHeight返回图像响应的大小，而不是显示大小

根据Josh的评论，这是不支持跨浏览器的，这可能是正确的，我在FF3中对此进行了测试，我正在添加一种方法来实现这一点，并确保所有浏览器都支持。几乎所有浏览器都支持

naturalWidth

和

naturalHeight

，但Internet Explorer 8及以下版本除外

由于IE8及以下版本在尝试检索大小值时会返回可见图像的大小，而不是自然大小，因此需要一个小的解决方法来获取来自于图像的完整大小尺寸

函数自然化（imageid）{
imageid=（imageid.src？imageid:document.getElementById（imageid））；
如果（document.documentMode<9）{
var img=新图像（）；
img.src=imageid.src；
返回{width:img.width，height:img.height}；
}
返回{宽度：imageid.naturalWidth，高度：imageid.naturalHeight}；
}

我将其设置为支持传递图像ID值或ID名称

用法：

<img src="http://c64.exitof99.com/ims/VicGauntlet2013.png" id="some_img"  width="400">

naturalSize("some_img");

// Returns: Object {width: 731, height: 387}


自然化（some_img）；
//返回：对象{宽度：731，高度：387}

或


//显示器：尺寸：731x387

在调用此函数之前，请确保已加载映像，无论是使用onload还是在将映像添加到DOM时触发

通过以下方式进行测试： Windows XP-Firefox 1.5，IE 8 Windows7-IE9，Chrome56 安卓6.0.1-Chrome50 安卓5.1.1-歌剧迷你7.6，海豚10.3

完整代码示例：

<!DOCTYPE html>
<html dir="LTR" lang="en"><head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
<body class="assignments" onload="run_test();">

<img src="http://c64.exitof99.com/ims/VicGauntlet2013.png" id="some_img" width="400">
<textarea id="outbox"></textarea>

<script type="text/javascript">
function naturalSize(imageid) {
 imageid = (imageid.src ? imageid : document.getElementById(imageid));
 if (document.documentMode < 9) {
  var img = new Image();
  img.src = imageid.src;
  return {width: img.width,height: img.height};
 }
 return {width: imageid.naturalWidth,height: imageid.naturalHeight};
}

function run_test() {
 var a = naturalSize("some_img");
 document.getElementById("outbox").innerHTML = "Size: "+a.width+"x"+a.height;
}
</script>
</body></html>


函数自然化（imageid）{
imageid=（imageid.src？imageid:document.getElementById（imageid））；
如果（document.documentMode<9）{
var img=新图像（）；
img.src=imageid.src；
返回{width:img.width，height:img.height}；
}
返回{宽度：imageid.naturalWidth，高度：imageid.naturalHeight}；
}
函数运行测试（）{
var a=自然化（“某些img”）；
document.getElementById（“发件箱”）.innerHTML=“大小：”+a.width+“x”+a.height；
}

这不会为您提供本机宽度是否可以使用jQuery删除大小属性获取大小，然后重新应用它们？如果使用css定义宽度，会发生什么情况？还有：这不影响布局吗？如果我没记错的话，你不能得到隐藏元素的宽度/高度。（他们将返回0）编写整个后端Web服务只是为了获得javascript中图像的高度和宽度？！如果不是跨浏览器的话，我不会使用它，但了解它仍然很有趣。谢谢这是目前最好的解决方案，因为IE9以下的所有浏览器都支持这一点。我希望我错过了一个图像属性，但这是一个很好的解决方法。谢谢。有时候这个选项不起作用。例如，如果未加载，您将获得高度为0。使用onload方法对我有效。@请小心“load”事件，如果图像是从缓存加载的，它将不会触发。但是，您应该能够将image.complete属性与“load”事件结合使用

var img = $('#imageid')[0]; //same as document.getElementById('imageid');
var width = img.naturalWidth;
var height = img.naturalHeight;

function naturalSize(imageid) {
 imageid = (imageid.src ? imageid : document.getElementById(imageid));
 if (document.documentMode < 9) {
  var img = new Image();
  img.src = imageid.src;
  return {width: img.width,height: img.height};
 }
 return {width: imageid.naturalWidth,height: imageid.naturalHeight};
}

<img src="http://c64.exitof99.com/ims/VicGauntlet2013.png" id="some_img"  width="400">

naturalSize("some_img");

// Returns: Object {width: 731, height: 387}

<img src="http://c64.exitof99.com/ims/VicGauntlet2013.png"
onclick="aaa=naturalSize(this);alert('Size: '+aaa.width+'x'+aaa.height);">

// Displays: Size: 731x387

<!DOCTYPE html>
<html dir="LTR" lang="en"><head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
<body class="assignments" onload="run_test();">

<img src="http://c64.exitof99.com/ims/VicGauntlet2013.png" id="some_img" width="400">
<textarea id="outbox"></textarea>

<script type="text/javascript">
function naturalSize(imageid) {
 imageid = (imageid.src ? imageid : document.getElementById(imageid));
 if (document.documentMode < 9) {
  var img = new Image();
  img.src = imageid.src;
  return {width: img.width,height: img.height};
 }
 return {width: imageid.naturalWidth,height: imageid.naturalHeight};
}

function run_test() {
 var a = naturalSize("some_img");
 document.getElementById("outbox").innerHTML = "Size: "+a.width+"x"+a.height;
}
</script>
</body></html>