282

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();

ただし、Safari や Google Chrome などの Webkit ブラウザーでは、値は 0 です。

4

30 に答える 30

357

Webkitブラウザーは、画像がロードされた後に、heightおよびwidthプロパティを設定します。タイムアウトを使用する代わりに、画像の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によって提案された非常に賢いソリューションです。

naturalHeightおよびnaturalWidthHTML5属性を使用することもできます。

于 2009-03-22T02:19:35.523 に答える
289

HTML5naturalHeightのおよびnaturalWidth属性を使用します。

例えば:

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

IE9+、Chrome、Firefox、Safari、Opera (統計) で動作します。

于 2011-06-20T15:27:34.133 に答える
62


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を使用して要素を作成し、作成されたオブジェクトの幅を取得するだけです。

于 2010-07-07T07:00:58.590 に答える
17

onload画像が WebKit キャッシュから読み込まれた場合にイベントが発生しないという問題について、受け入れられた回答には多くの議論があります。

私の場合、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の回答に従って、それらを削除したい場合があります。または、画像を複製します。)

于 2011-02-05T19:42:18.303 に答える
16

根本的な問題は、WebKit ブラウザー (Safari と Chrome) が JavaScript と CSS の情報を並行してロードすることです。したがって、CSS のスタイリング効果が計算される前に JavaScript が実行され、間違った応答が返される可能性があります。jQuery では、解決策は document.readyState == 'complete' になるまで待つことであることがわかりました。

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

幅と高さに関する限り...何をしているかによっては、ボーダーやパディングなどを含むoffsetWidthとoffsetHeightが必要になる場合があります。

于 2008-11-25T20:47:47.897 に答える
11

window.onloadこれは、イベント内から発砲することにより、私(サファリ3.2)で機能します:

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

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

  alert( pic.width() );
  alert( pic.height() );
});
于 2008-11-25T20:16:29.693 に答える
8

DOM をいじる必要なく、Javascript を使用してプログラムで画像を取得し、寸法を確認できます。

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';
于 2012-05-31T21:15:55.480 に答える
7

image.naturalHeightimage.naturalWidthプロパティはどうですか?

Chrome、Safari、Firefox のかなりの数のバージョンで問題なく動作するようですが、IE8 や IE9 ではまったく動作しません。

于 2012-01-03T18:54:42.060 に答える
6

Jquery には、naturalWidth と naturalHeight という 2 つのプロパティがあり、このように使用できます。

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

my-img は、画像を選択するために使用されるクラス名です。

于 2015-08-02T20:29:03.023 に答える
5

まばたきの実画像なしで正しい実寸法を取得する方法:

(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"... で動作します

于 2010-12-02T07:07:38.883 に答える
3

前に述べたように、画像がキャッシュにある場合、Xavi の回答は機能しません。この問題は、webkit がキャッシュされた画像で load イベントを発生させないことに対応しているため、幅/高さの属性が img タグで明示的に設定されていない場合、画像を取得する唯一の信頼できる方法は、window.loadイベントが発生するのを待つことです。

window.loadイベントは常に発生するため、その後はトリックなしで幅/高さと 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;

});

img.srcps:既にQueryString がある場合は、それを解析し、追加のパラメーターを追加してキャッシュをクリアする必要があります。

于 2011-09-27T17:09:04.450 に答える
2
$("#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/

于 2010-07-09T21:39:54.820 に答える
2

私の状況はおそらく少し異なります。JavaScript を使用して画像の src を動的に変更していますが、(フォト ギャラリー内の) 固定コンテナーに合わせて新しい画像のサイズが比例するようにする必要がありました。画像がロードされた後(画像のロードイベントを介して)、最初に画像の幅と高さの属性を削除し、適切な寸法を計算した後にこれらをリセットしました。ただし、これは Safari やおそらく IE では機能しません (IE で完全にテストしたわけではありませんが、画像が表示されないため...)。

とにかく、Safari は前の画像の寸法を保持するので、寸法は常に 1 画像後ろになります。これはキャッシュと関係があると思います。したがって、最も簡単な解決策は、画像を複製して DOM に追加することです (画像を DOM に追加して、高さと高さを取得することが重要です)。画像の可視性の値を非表示にします (機能しないため、display none は使用しないでください)。寸法を取得したら、クローンを削除します。

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);

このソリューションは、どのような場合でも機能します。

于 2012-11-01T00:59:26.870 に答える
2

Luke Smith が言うように、画像の読み込みはめちゃくちゃです。すべてのブラウザで信頼できるわけではありません。この事実は私に大きな苦痛を与えました。一部のブラウザーでは、キャッシュされた画像はイベントをまったく発生させないため、「画像の読み込みは setTimeout よりも優れている」と言った人は間違っています。

Luke Smith のソリューションはこちらです。

そして、この混乱を jQuery 1.4 でどのように処理するかについての興味深い議論があります。

width を 0 に設定してから、「complete」プロパティが true になり、width プロパティが 0 より大きくなるまで待つと、かなり信頼できることがわかりました。エラーにも注意する必要があります。

于 2009-11-06T15:22:04.160 に答える
1

最近、グラフを表す.dialogのデフォルトサイズを設定するための幅と高さを見つける必要がありました。私が使用した解決策は:

 graph= $('<img/>', {"src":'mySRC', id:'graph-img'});
    graph.bind('load', function (){
        wid = graph.attr('width');
        hei = graph.attr('height');

        graph.dialog({ autoOpen: false, title: 'MyGraphTitle', height:hei, width:wid })
    })

私にとって、これはFF3、Opera 10、IE 8、7、6で動作します

PSあなたはLightBoxやColorBoxのようないくつかのプラグインの内部を見ているいくつかのより多くの解決策を見つけるかもしれません

于 2011-01-26T17:30:59.093 に答える
1

event.special.loadキャッシュされた画像のロードイベントが発生しない場合に対処するためのjQueryプラグインが追加されました:http: //github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

于 2010-09-24T22:47:53.470 に答える
1

Xaviの答えに追加するために、 PaulIrishのgithubDavid Desandroのgitgubは、同じ原理で動作するimagesLoaded()と呼ばれる関数を提供し、一部のブラウザーのキャッシュされた画像が.load()イベントを発生させないという問題を回避します(巧妙なoriginal_src-> data_uri-> original_srcスイッチング)。

これは広く使用され、定期的に更新されており、問題に対する最も堅牢なソリューションであるIMOに貢献しています。

于 2011-08-16T20:00:02.290 に答える
1

これは、キャッシュされた画像と動的に読み込まれた画像の両方で機能します。

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/

于 2012-02-20T12:45:48.133 に答える
1

画像がすでに使用されている場合は、次のことを行う必要があります。

  1. 画像サイズを初期値に設定

    image.css('幅', '初期'); image.css('高さ', '初期');

  2. 寸法を取得する

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

于 2014-02-26T05:40:26.377 に答える
1

imagesLoaded jquery プラグインを使用して、いくつかの回避策ユーティリティ関数を実行しました: https://github.com/desandro/imagesloaded

            function waitForImageSize(src, func, ctx){
                if(!ctx)ctx = window;
                var img = new Image();
                img.src = src;
                $(img).imagesLoaded($.proxy(function(){
                    var w = this.img.innerWidth||this.img.naturalWidth;
                    var h = this.img.innerHeight||this.img.naturalHeight;
                    this.func.call(this.ctx, w, h, this.img);
                },{img: img, func: func, ctx: ctx}));
            },

URL、関数、およびそのコンテキストを渡すことで、これを使用できます。画像がロードされた後に関数が実行され、作成された画像、その幅と高さが返されます。

waitForImageSize("image.png", function(w,h){alert(w+","+h)},this)
于 2012-04-19T08:04:58.400 に答える
0
$(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の寸法の画像を表示するのに役立ちます

于 2012-08-03T05:11:25.770 に答える
0

もう 1 つの提案は、imagesLoaded プラグインを使用することです。

$("img").imagesLoaded(function(){
alert( $(this).width() );
alert( $(this).height() );
});
于 2011-12-10T11:04:05.693 に答える
0

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>
于 2015-11-30T07:37:02.820 に答える
0

私はディオの答えをチェックアウトしましたが、それは私にとってはうまくいきます。

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

すべての関数を aso で呼び出すようにしてください。これは、fadeIn() のリコール関数で画像サイズを処理します。

これをありがとう。

于 2010-12-14T09:49:39.810 に答える
0

私は別のアプローチを使用します。画像オブジェクトが使用されているときに、サーバーに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);

?>
于 2010-12-17T10:07:57.523 に答える
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;

乾杯!

于 2012-01-03T05:19:36.563 に答える
0

私自身の質問に対する答えを見つけようとして、このスレッドに出くわしました。ローダーの後に関数で画像の幅/高さを取得しようとしていたところ、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);
}
于 2013-09-11T20:34:10.237 に答える
-1

元の配置やイメージを変えたくない機能向け。

$(this).clone().removeAttr("width").attr("width");
$(this).clone().removeAttr("height").attr("height);
于 2009-08-27T15:04:39.550 に答える