我正在创建一个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。
当前回答
关于从WebKit缓存加载图像时onload事件不会触发的问题，在已接受的回答中有很多讨论。
在我的例子中，onload触发了缓存图像，但高度和宽度仍然为0。一个简单的setTimeout解决了我的问题:
$("img").one("load", function(){
var img = this;
setTimeout(function(){
// do something based on img.width and/or img.height
}, 0);
});
我不能说为什么onload事件即使从缓存加载图像时也会触发(改进了jQuery 1.4/1.5?) -但如果你仍然遇到这个问题，可能是我的答案和var src = img.src;img。SRC = "";img。SRC = SRC;技巧是有用的。
(请注意，就我的目的而言，我不关心图像属性或CSS样式中的预定义维度——但根据Xavi的回答，您可能想要删除这些维度。或者克隆图像。)
其他回答
$(document).ready(function(){
var image = $("#fix_img");
var w = image.width();
var h = image.height();
var mr = 274/200;
var ir = w/h
if(ir > mr){
image.height(200);
image.width(200*ir);
} else{
image.width(274);
image.height(274/ir);
}
});
//此代码帮助显示200*274维度的图像
在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>
下面是一个跨浏览器的解决方案，当您所选择的图像加载时触发一个事件:http://desandro.github.io/imagesloaded/您可以在imagesLoaded()函数中查找高度和宽度。
您可以通过编程方式获取图像，并使用Javascript检查尺寸，而完全不需要处理DOM。
var img = new Image();
img.onload = function() {
console.log(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';
$("#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/
