我正在创建一个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。
当前回答
这是跨浏览器的
var img = new Image();
$(img).bind('load error', function(e)
{
$.data(img, 'dimensions', { 'width': img.width, 'height': img.height });
});
img.src = imgs[i];
通过使用得到尺寸
$(this).data('dimensions').width;
$(this).data('dimensions').height;
干杯!
其他回答
Jquery有两个属性叫做naturalWidth和naturalHeight，你可以这样使用。
$('.my-img')[0].naturalWidth
$('.my-img')[0].naturalHeight
其中my-img是一个类名，用于选择我的图像。
如前所述，如果图像在缓存中，Xavi回答将不起作用。这个问题响应webkit没有对缓存的图像触发加载事件，所以如果在img标签中没有显式设置宽度/高度attrs，唯一可靠的获取图像的方法是等待窗口。加载要触发的事件。
窗外。加载事件总是会触发，所以在没有任何技巧的情况下，访问img的宽度/高度是安全的。
$(window).load(function(){
//these all work
$('img#someId').css('width');
$('img#someId').width();
$('img#someId').get(0).style.width;
$('img#someId').get(0).width;
});
如果需要获取可能被缓存的动态加载图像的大小(以前加载过)，可以使用Xavi方法加上查询字符串来触发缓存刷新。缺点是它将导致对服务器的另一个请求，请求已经缓存并且应该已经可用的img。愚蠢的Webkit。
var pic_real_width = 0,
img_src_no_cache = $('img#someId').attr('src') + '?cache=' + Date.now();
$('<img/>').attr('src', img_src_no_cache).load(function(){
pic_real_width = this.width;
});
ps:如果你在img中有一个QueryString。SRC，您将不得不解析它并添加额外的参数来清除缓存。
另一个建议是使用imagesLoaded插件。
$("img").imagesLoaded(function(){
alert( $(this).width() );
alert( $(this).height() );
});
这适用于我(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>
