也可以javascript访问本地图像的大小？(Can Javascript access nati

2019-06-25 07:29发布

站内文章 / 后端开发
12 0 0

我正在写一个jQuery的功能，我想访问这两个图像的原始大小，并为它指定的页面上的大小。 我想设置一个变量为每个。

如何做到这一点？

Answer 1:

现代浏览器

当我在2009年写了这个答案回浏览器的景观是非常不同的。 如今任何合理的现代浏览器支持皮姆雅格的建议使用img.naturalWidth和img.naturalHeight 。 看看他的回答。

传统的回答具有超强的旧浏览器兼容

// find the element
var img = $('#imageid');

/* 
 * create an offscreen image that isn't scaled
 * but contains the same image.
 * Because it's cached it should be instantly here.
 */

var theImage = new Image();
theImage.src = img.attr("src");

// you should check here if the image has finished loading
// this can be done with theImage.complete

alert("Width: " + theImage.width);
alert("Height: " + theImage.height);


Answer 2:

这应该工作： 

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

的naturalWidth和naturalHeight返回到图像的反应，不显示尺寸的大小。

据乔希”的评论这是不支持跨浏览器，这可能是正确的，我在FF3这个测试



Answer 3:

编辑-新的想法...看到http://jsbin.com/uzoza 

  var fixedW = $("#imageToTest").width(); 
  $("#imageToTest").removeAttr("width"); 
  var realW = $("#imageToTest").width(); 
  $("#imageToTest").attr("width", fixedW);

原来的答案

看到如何使用JavaScript来获取图像尺寸（高宽）？ 

var img = $('#imageid'); 

var width = img.clientWidth;
var height = img.clientHeight;


Answer 4:

我加入的方式来做到这一点，并确保有适用于所有浏览器的支持。 几乎所有的浏览器都支持naturalWidth和naturalHeight除了Internet Explorer 8和下面。

由于IE 8及以下使用尝试检索尺寸值时，将返回可见图像的大小，而不是自然的大小，需要一个小的解决方法，以获得其来自一个全尺寸的尺寸由杰克·摩尔例子 。 

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};
}

我此设置，以支持通过任一图像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}

要么

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

// Displays: Size: 731x387

确保调用此，无论是使用onload事件或在其添加到DOM触发之前，为了确保图像加载。

- 火狐1.5，IE 8的Windows 7 - IE 9，铬56的Android 6.0.1 - 镀铬50的Android 5.1.1 - Opera Mini的7.6，海豚10.3视窗XP：与测试

完整的代码示例： 

<!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>


Answer 5:

我的解决办法是写获取/下载图像，然后获取它的分辨率，并将它作为一个Web服务{宽度：X，高度为：y}。 然后你用$就相当于或调用它来检索此。

另外，您可以使用图像添加到一个隐藏的div 

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

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



文章来源: Can Javascript access native image size?
标签： javascript jquery image size
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~