给img设置一个固定的大小时，要怎样获取图片的原始尺寸

　　给img设置一个固定的大小时，要怎样获取图片的原始尺寸

　　如何获取图片的原创尺寸？

　　如下所示，当为img设置固定大小时，如何获取图片的原创大小？

　　#oImg{

width: 100px;

height: 100px;

}

　　方法1：

　　HTML5提供了一个新属性naturalWidth / naturalHeight，可以直接获取图片的原创宽度和高度。这两个属性已在Firefox / Chrome / Safari / Opera和IE9中实现。

　　 w = document.getElementsByTagName("img")[0].naturalWidth;

h = document.getElementsByTagName("img")[0].naturalHeight;

console.log(w + ' ' + h);

　　打印结果与原创尺寸匹配。但前提是必须将图片完全下载到客户端浏览器中进行判断。

　　如果是不受支持的浏览器版本，则可以使用传统方法进行判断，如下所示：

　　var img = document.getElementById("oImg"),

　　w,h;

if (oImg.naturalWidth) {

　　// HTML5 browsers

　　w = oImg.naturalWidth;

　　h = oImg.naturalHeight;

} else {

　　// IE 6/7/8

　　var nImg = new Image();

// nImg.src = oImg.src;

　　nImg.onload = function () {

　　　　w = nImg.width;

　　　　h = nImg.height;

　　　　console.log(w + " " + h)

　　}

　　nImg.src = oImg.src;

}

　　此时添加onload的原因是图像可能无法完全加载，从而导致图像的宽度和高度不可用。

　　这里还有一点要注意，为什么要在nImg.onload函数之后放置nImg.src = oImg.src代码？这样做是为了与ie兼容。即除了第一次加载图像正常之外，之后刷新时将没有任何响应。其他大多数浏览器都正常。是什么原因呢？

　　原因很简单，这是因为浏览器的缓存。一次加载图像后，如果有另一个图像请求，由于浏览器已经缓存了该图像，它将不会启动新请求，而是直接从缓存中加载该请求。对于大多数浏览器而言，它们的视图使这两种加载方法对用户透明，这也将导致图像的onload事件，即忽略该身份并且不会导致图像的onload事件。 。 。通常情况下，您可以使用complete来确定是否已加载映像。对于complete属性，IE根据是否显示图片进行判断，即显示加载的图片时，complete属性的值为true，否则始终为false，与图片是否显示无关。之前已经加载过，也就是说，它与缓存无关！您可以编写以下函数来实现各种浏览器中预加载图像的兼容性。如下：

　　var img = document.getElementById("oImg"),

w,h;

if (oImg.naturalWidth) {

　　// HTML5 browsers

　　w = oImg.naturalWidth;

　　h = oImg.naturalHeight;

} else {

　　// IE 6/7/8

　　var nImg = new Image();

　　nImg.src = oImg.src;

　　if(nImg.complete) { // 图片已经存在于浏览器缓存

　　　　console.log(nImg.width + " " + nImg.height);

　　}else{

　　　　nImg.onload = function () {

　　　　　　w = nImg.width;

　　　　　　h = nImg.height;

　　　　　　console.log(w + " " + h);

　　　　}

　　}

}

　　最后封装到一个函数中，如下所示：

　　function getImgNaturalDimensions(oImg, callback) {

　　var nWidth, nHeight;

　　if (!oImg.naturalWidth) { // 现代浏览器

　　　　nWidth = oImg.naturalWidth;

　　　　nHeight = oImg.naturalHeight;

　　　　callback({w: nWidth, h:nHeight});

　　} else { // IE6/7/8

　　　　var nImg = new Image();

nImg.onload = function() {

var nWidth = nImg.width,

nHeight = nImg.height;

callback({w: nWidth, h:nHeight});

　　　　}

　　　　nImg.src = oImg.src;

　　}

}

var img = document.getElementById("oImg");

getImgNaturalDimensions(img, function(dimensions){

　　console.log(dimensions.w);

});

　　方法2 ：（图片无需在页面上显示）

　　将img放在页面上的不可见位置，缺点是：此方法需要浏览器加载图像

　　.imgbox{// img 盒子

　　width: 0;

　　overflow: hidden;

}

　　然后去获取诸如图片的宽度和高度之类的信息：

　　function getImgNaturalDimensions2(oImg) {

　　var nWidth, nHeight;

　　if (!oImg.naturalWidth) { // 现代浏览器

　　nWidth = oImg.naturalWidth;

　　nHeight = oImg.naturalHeight;

　　return ({w: nWidth, h:nHeight});

} else { // IE6/7/8

　　　　nWidth = oImg.width;

　　　　nHeight = oImg.height;

　　　　return ({w: nWidth, h:nHeight});

　　}

}

var getImg = getImgNaturalDimensions2(img);

console.log(getImg)

　　但是，这里一切都还好吗？答案当然不是。

　　使用此方法后，您会发现有时可以获取img的宽度和高度，但有时为0。原因请参见下一节的分析。

　　让我们看看如何正常使用它！

　　var img = document.getElementById("oImg");

img.onload = function(){

//方法一

getImgNaturalDimensions(img, function(dimensions){

console.log(dimensions.w);

});

//方法二

var getImg = getImgNaturalDimensions2(img);

console.log(getImg);

}

　　只需在img.onload函数中调用该函数即可。

　　原因，请参阅下一节的分析：js获取图片信息（二） ----- js获取img 0的高度和宽度