web-dev-qa-db-ja.com

Javascript-画像の高さを取得

AJAXを使用してWebページに多数の画像を表示する必要があります。それらはすべて異なるサイズであるため、表示する前にサイズを調整したいと思います。 JavaScriptでこれを行う方法はありますか？

各画像にPHPのgetimagesize()を使用すると、多くの画像があるため、不必要なパフォーマンスヒットが発生します。

javascriptajax
30
mrunal777

JavaScriptを使用して画像の高さと幅を取得するソリューションを探していました。私は多くを見つけましたが、これらのソリューションはすべて、画像がブラウザのキャッシュに存在する場合にのみ機能しました。

最後に、画像がブラウザのキャッシュに存在しない場合でも画像の高さと幅を取得するソリューションを見つけました。

<script type="text/javascript">

  var imgHeight;
  var imgWidth;

  function findHHandWW() {
    imgHeight = this.height;
    imgWidth = this.width;
    return true;
  }

  function showImage(imgPath) {
    var myImage = new Image();
    myImage.name = imgPath;
    myImage.onload = findHHandWW;
    myImage.src = imgPath;
  }
</script>

おかげで、

Binod Suman

http://binodsuman.blogspot.com/2009/06/how-to-get-height-and-widht-of-image.html

77
Binod Suman

これを試して：

var curHeight;
var curWidth;

function getImgSize(imgSrc)
{
var newImg = new Image();
newImg.src = imgSrc;
curHeight = newImg.height;
curWidth = newImg.width;

}
21
Stephen Wrighton

...しかし...ブラウザにバイトを送信してそこで行うよりも、サーバー側で画像サイズを調整した方が良いとは思いませんか？

画像サイズを調整するということは、HTML画像タグに高さと幅を設定するという意味ではありません。その場合、サーバーからクライアントに大量のバイトを送信し続けます。つまり、実際に画像自体をサーバー側で操作します。

私はここにそのアプローチを取る.NET C＃コードを持っていますが、それを行うためのPHP方法も必要です： http://ifdefined.com/www/gallery.html

また、サーバー側でそれを行うことにより、調整を一度だけ行ってから調整した画像を保存する可能性が開かれます。これは非常に高速です。

3
Corey Trager

JQueryで試してください：

<script type="text/javascript">
function jquery_get_width_height()
{
    var imgWidth = $("#img").width();
    var imgHeight = $("#img").height();
    alert("JQuery -- " + "imgWidth: " + imgWidth + " - imgHeight: " + imgHeight);
}
</script>

または

<script type="text/javascript">
function javascript_get_width_height()
{
    var img = document.getElementById('img');
    alert("JavaSript -- " + "imgWidth: " + img.width + " - imgHeight: " + img.height);
}
</script>
1
Hoan Huynh

これに対する私の推奨される解決策は、サーバー側でサイズ変更を行うことです。そのため、不必要なデータの送信が少なくなります。

ただし、クライアント側で行う必要があり、画像の比率を維持する必要がある場合は、以下を使用できます。

var image_from_ajax = new Image();
image_from_ajax.src = fetch_image_from_ajax(); // Downloaded via ajax call?

image_from_ajax = rescaleImage(image_from_ajax);

// Rescale the given image to a max of max_height and max_width
function rescaleImage(image_name)
{
    var max_height = 100;
    var max_width = 100;

    var height = image_name.height;
    var width = image_name.width;
    var ratio = height/width;

    // If height or width are too large, they need to be scaled down
    // Multiply height and width by the same value to keep ratio constant
    if(height > max_height)
    {
        ratio = max_height / height;
        height = height * ratio;
        width = width * ratio;
    }

    if(width > max_width)
    {
        ratio = max_width / width;
        height = height * ratio;
        width = width * ratio;
    }

    image_name.width = width;
    image_name.height = height;
    return image_name;
}
1
ConroyP

画像自体を調整しますか、それとも表示方法だけを調整しますか？前者の場合、サーバー側に何かが必要です。後者の場合、image.heightとimage.widthを変更するだけです。

0
Dori

さて...この質問を解釈する方法はいくつかあります。

最初の方法と私があなたが意味すると思う方法は、すべての画像が同じサイズで表示されるように表示サイズを単に変更することです。このため、JavaScriptではなくCSSを実際に使用します。適切な幅と高さの値を設定したクラスを作成し、すべての<img>タグはこのクラスを使用します。

2番目の方法は、すべての画像の縦横比を維持しながら、表示サイズを適切な値にスケーリングすることです。 JavaScriptでこれにアクセスする方法はありますが、簡単なコードサンプルを作成するには少し必要です。

3番目の方法は、この方法を意味しないことを願っていますが、画像の実際のサイズを変更することです。 JavaScriptは画像を作成できないだけでなく、フルサイズの画像がすでに送信されているため、意味をなさないため、これはサーバー側で行う必要があります。

0
Languard

Firefox 3およびSafariでは、高さと幅を変更するだけで画像のサイズを変更しても見た目が悪くないことに注意してください。他のブラウザでは、最近傍のリサンプリングを使用しているため、非常にノイズが多いように見えます。もちろん、より大きな画像を提供するためにお金を払っていますが、それは問題ではないかもしれません。

0
bhollis

非表示の_<img>_タグ（_style = "display none"_）に画像をロードし、jQueryで発生するロードイベントをリッスンし、JavaScriptで新しいImage()を作成し、ソースを非表示の画像に設定します、および上記のようなサイズを取得します。

0
Ray