12

画像を比例してサイズ変更する画像リサイザー機能があります。すべての画像を読み込むたびに、画像を使用してこの関数を呼び出し、その幅または高さが私の最大幅と最大高さよりも大きい場合はサイズを変更します。FF Chrome Opera Safariでimg.widthとimg.heightを取得できますが、IEが失敗します。どうすればこれを処理できますか？

コードで説明しましょう。

<img src = "images / img01.png" onload = "window.onImageLoad（this、120、120）" />

関数onImageLoad（img、maxWidth、maxHeight）{
     var width = img.width; //問題はここにあります
     varheight=img.height //問題はここにあります
}

私のハイライトされた行では、img.widthはIEシリーズでは機能しません。

なにか提案を？

ありがとう。

4

8 に答える 8

22

widthと を使用しないでくださいheight。代わりにnaturalWidthandを使用してください。naturalHeightこれらは、画像ファイルから画像のスケーリングされていないピクセル寸法を提供し、ブラウザー間で機能します。

于 2013-07-25T13:57:21.673 に答える
4

男、私はこれを2日間探していました。ありがとう。

私はjQueryを使用していますが、問題ありません。問題は IE の JavaScript に関連しています。

私の以前のコード:

var parentItem = $('<div/>')
   .hide();      // sets display to 'none'

var childImage = $('<img/>')
   .attr("src", src)
   .appendTo(parentItem)   // sets parent to image
   .load(function(){
      alert(this.width);  // at this point image is not displayed, because parents display parameter is set to 'none' - IE gives you value '0'
   });

これは FF、Opera、Safari では機能しますが、IE では機能しません。IEで「0」を取得していました。

私のための回避策：

var parentItem = $('<div/>')
   .hide();

var childImage = $('<img/>')
   .attr("src", src)
   .load(function(){
      alert(this.width);  // at this point image css display is NOT 'none'  - IE gives you correct value
      childImage.appendTo(parentItem);   // sets parent to image
   });
于 2011-07-18T14:32:56.403 に答える
3

これが私がそれを解決した方法です（ライブラリを使用したくないサイト上の唯一のjsであるため）。

    var imageElement = document.createElement('img');
    imageElement.src = el.href; // taken from a link cuz I want it to work even with no script
    imageElement.style.display      = 'none';

    var imageLoader = new Image();
    imageLoader.src = el.href;
    imageLoader.onload = function() {
        loaderElement.parentElement.removeChild(loaderElement);
        imageElement.style.position     = 'absolute';
        imageElement.style.top          = '50%';
        imageElement.style.left         = '50%';
        // here using the imageLoaders size instead of the imageElement..
        imageElement.style.marginTop    = '-' + (parseInt(imageLoader.height) / 2) + 'px';
        imageElement.style.marginLeft   = '-' + (parseInt(imageLoader.width) / 2) + 'px';
        imageElement.style.display      = 'block';
    }
于 2012-11-26T18:23:34.747 に答える
2

これは、IE がdisplay: none画像の幅と高さを計算できないためです。visibility: hidden代わりに使用してください。

于 2012-11-27T09:38:34.747 に答える
0

私はこれを試してみます：

function onImageLoad(img, maxWidth, maxHeight) {
   var width, height;
   if ('currentStyle' in img) {
     width = img.currentStyle.width;
     height = img.currentStyle.height;
   }
   else {
     width = img.width;
     height = img.height;
   }
   // whatever
}

編集— どうやら私がそれを試みた場合、それが機能しないことを学ぶでしょう:-) OK、<img>IEに関する限り、「幅」と「高さ」は間違いなく要素の属性のようです。おそらく問題は、要素に対して「ロード」イベントが間違ったタイミングで発生していることです。そうであるかどうかを確認するには、次のようにします。

function onImageLoad(img, maxWidth, maxHeight) {
   var width, height;
   var i = new Image();
   i.onload = function() {
     width = i.width; height = i.height;
     // ... stuff you want to do ...
   };
   i.src = img.href;
}
于 2010-12-17T16:04:00.643 に答える
0 
    var screenW = screen.width;
    var screenH = screen.height;
    //alert( screenW );
    function checkFotoWidth( img, maxw )
    {
        if( maxw==undefined)
            maxw = 200;
        var imgW = GetImageWidth(img.src);
        var imgH = GetImageHeight(img.src);
            //alert(GetImageWidth(img.src).toString()); // img.width); // objToString(img));
        if (imgW > maxw || (img.style.cursor == "hand" && imgW == maxw))
        {
            if (imgW > screenW) winW = screenW;
            else winW = imgW;

            if (imgH > screenH) winH = screenH;
            else winH = imgH;

            img.width=maxw;
            img.style.cursor = "pointer";

            img.WinW = winW;
            img.WinH = winH;
            //alert("winW : " + img.WinW);
            img.onclick = function() { openCenteredWindow("Dialogs/ZoomWin.aspx?img=" + this.src, this.WinW, this.WinH, '', 'resizable=1'); }
            img.alt = "Klik voor een uitvergroting :: click to enlarge :: klicken Sie um das Bild zu vergrössern";
            //alert("adding onclick);
        }
    }

    function GetImageWidth(imgSrc) 
    {
        var img = new Image();
        img.src = imgSrc;
        return img.width;
    } 

    function GetImageHeight(imgSrc) 
    {
        var img = new Image();
        img.src = imgSrc;
        return img.height;
    }
于 2010-12-17T15:43:25.687 に答える
-1 
getDisplay().getImage().setUrl(imgURL);
final Image img = new Image(imgURL);
int w=img.getWidth();
int h=img.getHeight();
于 2014-07-23T13:57:13.030 に答える