我正在创建一个jQuery插件。
我如何得到真实的图像宽度和高度与Javascript在Safari?
Firefox 3、IE7和Opera 9的操作如下:
var pic = $("img")
// need to remove these in of case img-element has set width and height
pic.removeAttr("width");
pic.removeAttr("height");
var pic_real_width = pic.width();
var pic_real_height = pic.height();
但在Safari和谷歌等Webkit浏览器中，Chrome的值为0。
当前回答
使用HTML5中的naturalHeight和naturalWidth属性。
例如:
var h = document.querySelector('img').naturalHeight;
工作在IE9+， Chrome, Firefox, Safari和Opera(统计)。
其他回答
Jquery有两个属性叫做naturalWidth和naturalHeight，你可以这样使用。
$('.my-img')[0].naturalWidth
$('.my-img')[0].naturalHeight
其中my-img是一个类名，用于选择我的图像。
$("#myImg").one("load",function(){
//do something, like getting image width/height
}).each(function(){
if(this.complete) $(this).trigger("load");
});
来自克里斯的评论:http://api.jquery.com/load-event/
这适用于我(safari 3.2)，从窗口内发射。onload事件:
$(window).load(function() {
var pic = $('img');
pic.removeAttr("width");
pic.removeAttr("height");
alert( pic.width() );
alert( pic.height() );
});
在github检查这个存储库!
使用Javascript检查宽度和高度的好例子
https://github.com/AzizAK/ImageRealSize
-编辑的要求从一些评论。
Javascript代码:
function CheckImageSize(){
var image = document.getElementById("Image").files[0];
createReader(image, function (w, h) {
alert("Width is: " + w + " And Height is: "+h);
});
}
function createReader(file, whenReady) {
var reader = new FileReader;
reader.onload = function (evt) {
var image = new Image();
image.onload = function (evt) {
var width = this.width;
var height = this.height;
if (whenReady) whenReady(width, height);
};
image.src = evt.target.result;
};
reader.readAsDataURL(file);
}
和HTML代码:
<html>
<head>
<title>Image Real Size</title>
<script src="ImageSize.js"></script>
</head>
<body>
<input type="file" id="Image"/>
<input type="button" value="Find the dimensions" onclick="CheckImageSize()"/>
</body>
<html>
My situation is probably a little different. I am dynamically changing the src of an image via javascript and needed to ensure that the new image is sized proportionally to fit a fixed container (in a photo gallery). I initially just removed the width and height attributes of the image after it is loaded (via the image's load event) and reset these after calculating the preferred dimensions. However, that does not work in Safari and possibly IE (I have not tested it in IE thoroughly, but the image doesn't even show, so...).
Safari保留了前一张图片的尺寸所以尺寸总是在后面一张图片上。我认为这和缓存有关。因此，最简单的解决方案是克隆图像并将其添加到DOM中(重要的是将其添加到DOM中以获得with和height)。给图像一个可见值为hidden(不要使用display none，因为它不起作用)。获得尺寸后，删除克隆。
下面是我使用jQuery的代码:
// Hack for Safari and others
// clone the image and add it to the DOM
// to get the actual width and height
// of the newly loaded image
var cloned,
o_width,
o_height,
src = 'my_image.jpg',
img = [some existing image object];
$(img)
.load(function()
{
$(this).removeAttr('height').removeAttr('width');
cloned = $(this).clone().css({visibility:'hidden'});
$('body').append(cloned);
o_width = cloned.get(0).width; // I prefer to use native javascript for this
o_height = cloned.get(0).height; // I prefer to use native javascript for this
cloned.remove();
$(this).attr({width:o_width, height:o_height});
})
.attr(src:src);
这个解决方案在任何情况下都有效。
