js獲取圖片信息（一）-----獲取圖片的原始尺寸

如何獲取圖片的原始尺寸大小？

　　如下，當給 img 設置一個固定的大小時，要怎樣獲取圖片的原始尺寸呢？

#oImg{
    width: 100px;
    height: 100px;
}

<img src="images/test.jpg" id="oImg" alt="">

方法一：

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 的原因是，圖片可能沒加載完成，導致圖片的 width 、height 無法獲取到。

這里還有有個點要注意， nImg.src = oImg.src 這段代碼為什么要放在 nImg.onload 函數后面？ 這樣做是為了兼容 ie 。ie 除了第一次加載圖片時候獲取正常，之后再刷新就沒有反應了。其他大部分瀏覽器獲取正常。這是什么原因呢？

原因也挺簡單的，就是因為瀏覽器的緩存了。當圖片加載過一次以后，如果再有對該圖片的請求時，由於瀏覽器已經緩存住這張圖片了，不會再發起一次新的請求，而是直接從緩存中加載過來。對於大部分瀏覽器，它們視圖使這兩種加載方式對用戶透明，同樣會引起圖片的onload事件，而 ie 則忽略了這種同一性，不會引起圖片的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); });

 

方法二：（圖片不需要再頁面中展示）

將 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 的 width、height ，但有時會是個 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的height、width寬高值為0