support - 用JavaScript獲取圖片的真實寬度和高度?(在Safari/Chrome中)




jquery version (20)

Webkit瀏覽器在加載圖像後設置高度和寬度屬性。 我建議使用圖像的onload事件,而不是使用超時。 這裡有個簡單的例子:

var img = $("img")[0]; // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;   // Note: $(this).width() will not
        pic_real_height = this.height; // work for in memory images.
    });

為了避免CSS可能對圖像尺寸產生的任何影響,上面的代碼會在圖像的內存中創建副本。 這是FDisk建議的一個非常聰明的解決方案。

您也可以使用naturalHeightnaturalWidth HTML5屬性。

我正在創建一個jQuery插件。

如何在Safari中使用JavaScript獲得真實圖像的寬度和高度?

以下適用於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();

但是在Webkit瀏覽器中,例如Safari和Google Chrome瀏覽器值為0。


jquery有兩個屬性叫做naturalWidth和naturalHeight,你可以這樣使用。

$('.my-img')[0].naturalWidth 
$('.my-img')[0].naturalHeight

my-img是用於選擇我的圖像的類名稱。


使用HTML5naturalHeightnaturalWidth屬性。

例如:

var h = document.querySelector('img').naturalHeight;

適用於IE9 +,Chrome,Firefox,Safari和Opera( stats )。


偶然發現這條線索試圖為我自己的問題找到答案。 我試圖在加載器後面的函數中獲取圖像的寬度/高度,並且一直提出0.我覺得這可能是您要查找的內容,但它對我來說很有用:

tempObject.image = $('<img />').attr({ 'src':"images/prod-" + tempObject.id + ".png", load:preloader });
xmlProjectInfo.push(tempObject);

function preloader() {
    imagesLoaded++;
    if (imagesLoaded >= itemsToLoad) { //itemsToLoad gets set elsewhere in code
        DetachEvent(this, 'load', preloader); //function that removes event listener
        drawItems();
    }   
}

function drawItems() {
    for(var i = 1; i <= xmlProjectInfo.length; i++)
        alert(xmlProjectInfo[i - 1].image[0].width);
}

在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>

在已接受的答案中,有許多關於如果從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);
});

我不能說為什麼即使從緩存中加載圖像(為了改進jQuery 1.4 / 1.5?), onload事件為何會觸發 - 但如果您仍然遇到此問題,可能是我的答案和var src = img.src; img.src = ""; img.src = src;的組合var src = img.src; img.src = ""; img.src = src; var src = img.src; img.src = ""; img.src = src; 技術將起作用。

(注意,對於我的目的,我不關心預定義的維度,無論是在圖像的屬性還是CSS樣式中 - 但是您可能想要刪除這些維度,按照哈維的答案或克隆圖像。)


如果圖像已被使用,您可以使用sholud:

  1. 將圖像尺寸設置為初始

    image.css('width','initial'); image.css('height','initial');

  2. 獲取尺寸

    var originalWidth = $(this).width(); var originalHeight = $(this).height();


您可以使用HTML圖像元素的naturalWidth和naturalHeight屬性。 (這裡有更多info )。

你會像這樣使用它:

//you need a reference to the DOM element, not a jQuery object. It would be better if you can use document.getElementByTagsName or ID or any other native method
var pic = $("img")[0];
var pic_real_width = pic.naturalWidth;
var pic_real_height = pic.naturalHeight;

它似乎適用於所有瀏覽器,除了版本8及以下的IE瀏覽器。


我使用不同的方法,只需在圖像對象正在使用時將Ajax調用到服務器以獲取圖像大小。

//make json call to server to get image size
$.getJSON("http://server/getimagesize.php",
{"src":url},
SetImageWidth
);

//callback function
function SetImageWidth(data) {

    var wrap = $("div#image_gallery #image_wrap");

    //remove height
     wrap.find("img").removeAttr('height');
    //remove height
     wrap.find("img").removeAttr('width');

    //set image width
    if (data.width > 635) {
        wrap.find("img").width(635);
    }
    else {
         wrap.find("img").width(data.width);
    }
}

當然還有服務器端代碼:

<?php

$image_width = 0;
$image_height = 0;

if (isset ($_REQUEST['src']) && is_file($_SERVER['DOCUMENT_ROOT'] . $_REQUEST['src'])) {

    $imageinfo = getimagesize($_SERVER['DOCUMENT_ROOT'].$_REQUEST['src']);
    if ($imageinfo) {
       $image_width=  $imageinfo[0];
       $image_height= $imageinfo[1];
    }
}

$arr = array ('width'=>$image_width,'height'=>$image_height);

echo json_encode($arr);

?>

我們如何在沒有眨眼的實際圖像的情況下獲得真實的維度

(function( $ ){
   $.fn.getDimensions=function(){
         alert("First example:This works only for HTML code without CSS width/height definition.");
         w=$(this, 'img')[0].width;
         h=$(this, 'img')[0].height;

         alert("This is a width/height on your monitor: " + $(this, 'img')[0].width+"/"+$(this, 'img')[0].height);

         //This is bad practice - it shows on your monitor
         $(this, 'img')[0].removeAttribute( "width" );
         $(this, 'img')[0].removeAttribute( "height" );
         alert("This is a bad effect of view after attributes removing, but we get right dimensions: "+  $(this, 'img')[0].width+"/"+$(this, 'img')[0].height);
         //I'am going to repare it
         $(this, 'img')[0].width=w;
         $(this, 'img')[0].height=h;
         //This is a good practice - it doesn't show on your monitor
         ku=$(this, 'img').clone(); //We will work with a clone
         ku.attr( "id","mnbv1lk87jhy0utrd" );//Markup clone for a final removing
         ku[0].removeAttribute( "width" );
         ku[0].removeAttribute( "height" );
         //Now we still get 0
         alert("There are still 0 before a clone appending to document: "+ $(ku)[0].width+"/"+$(ku)[0].height);
         //Hide a clone
         ku.css({"visibility" : "hidden",'position':'absolute','left':'-9999px'}); 
         //A clone appending
         $(document.body).append (ku[0]);
         alert("We get right dimensions: "+ $(ku)[0].width+"/"+$(ku)[0].height);
         //Remove a clone
         $("#mnbv1lk87jhy0utrd").remove();

         //But a next resolution is the best of all. It works in case of CSS definition of dimensions as well.
         alert("But if you want to read real dimensions for image with CSS class definition outside of img element, you can't do it with a clone of image. Clone method is working with CSS dimensions, a clone has dimensions as well as in CSS class. That's why you have to work with a new img element.");
         imgcopy=$('<img src="'+ $(this, 'img').attr('src') +'" />');//new object 
         imgcopy.attr( "id","mnbv1lk87jhy0aaa" );//Markup for a final removing
         imgcopy.css({"visibility" : "hidden",'position':'absolute','left':'-9999px'});//hide copy 
         $(document.body).append (imgcopy);//append to document 
         alert("We get right dimensions: "+ imgcopy.width()+"/"+imgcopy.height());
         $("#mnbv1lk87jhy0aaa").remove();


   }
})( jQuery );

$(document).ready(function(){

   $("img.toreaddimensions").click(function(){$(this).getDimensions();});
});

它適用於<img class =“toreaddimensions”...


我檢查了Dio的答案,它對我很好。

$('#image').fadeIn(10,function () {var tmpW = $(this).width(); var tmpH = $(this).height(); });

確保你打電話給你所有的功能。 在fadeIn()的重算器函數中處理圖像大小。

謝謝你。


我的情況可能有點不同。 我通過JavaScript動態更改圖像的src,並需要確保新圖像按比例調整大小以適應固定容器(在照片庫中)。 我最初剛剛刪除圖像的寬度和高度屬性(通過圖像的加載事件),並在計算出首選尺寸後重置這些屬性。 然而,這並不適用於Safari和可能的IE瀏覽器(我沒有在IE中徹底測試過,但圖像甚至沒有顯示,所以...)。

無論如何,Safari保留了之前圖像的尺寸,因此尺寸始終是一個圖像。 我認為這與緩存有關。 所以最簡單的解決方案就是克隆圖像並將其添加到DOM中(重要的是將它添加到DOM中以獲取高度和高度)。 為圖像提供隱藏的可見性值(不要使用無顯示,因為它不起作用)。 獲取尺寸後,請刪除克隆。

這裡是我使用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);

無論如何,這個解決方案都可以工作


根本問題是WebKit瀏覽器(Safari和Chrome)並行加載JavaScript和CSS信息。 因此,在計算CSS的樣式效果之前,JavaScript可能會執行,並返回錯誤的答案。 在jQuery中,我發現解決方案是等到document.readyState =='complete',例如.eg,

jQuery(document).ready(function(){
  if (jQuery.browser.safari && document.readyState != "complete"){
    //console.info('ready...');
    setTimeout( arguments.callee, 100 );
    return;
  } 
  ... (rest of function) 

至於寬度和高度去...取決於你在做什麼,你可能想要offsetWidth和offsetHeight,其中包括邊界和填充的東西。


正如盧克史密斯所說, 圖像加載是一團糟 。 它在所有瀏覽器上都不可靠。 這個事實給了我很大的痛苦。 緩存的圖像在某些瀏覽器中根本不會觸發事件,因此那些說“圖像加載比setTimeout好”的人是錯誤的。

盧克史密斯的解決方案就here.

關於如何在jQuery 1.4中處理這個混亂,有一個有趣的討論

我發現將寬度設置為0非常可靠,然後等待“完成”屬性變為true並且寬度屬性大於零。 你也應該注意錯誤。



用於不想更改原始位置或圖像的功能。

$(this).clone().removeAttr("width").attr("width");
$(this).clone().removeAttr("height").attr("height);

這適用於我(safari 3.2),通過從window.onload事件中觸發:

$(window).load(function() {
  var pic = $('img');

  pic.removeAttr("width"); 
  pic.removeAttr("height");

  alert( pic.width() );
  alert( pic.height() );
});

這適用於緩存和動態加載的圖像。

function LoadImage(imgSrc, callback){
  var image = new Image();
  image.src = imgSrc;
  if (image.complete) {
    callback(image);
    image.onload=function(){};
  } else {
    image.onload = function() {
      callback(image);
      // clear onLoad, IE behaves erratically with animated gifs otherwise
      image.onload=function(){};
    }
    image.onerror = function() {
        alert("Could not load image.");
    }
  }
}

要使用這個腳本:

function AlertImageSize(image) {
  alert("Image size: " + image.width + "x" + image.height);
}
LoadImage("http://example.org/image.png", AlertImageSize);

演示: http://jsfiddle.net/9543z/2/ : http://jsfiddle.net/9543z/2/



function getOriginalWidthOfImg(img_element) {
    var t = new Image();
    t.src = (img_element.getAttribute ? img_element.getAttribute("src") : false) || img_element.src;
    return t.width;
}

您不需要從圖像或圖像尺寸屬性中刪除樣式。 只需使用javascript創建一個元素並獲取創建的對象寬度。






webkit