Webページに画像を比例表示する実装原理とJSコード_JavaScriptスキル

動的な Web サイトでは、独自の画像をアップロードする必要があることがよくありますが、これらの画像をサムネイルとして表示する場合、美しく表示するには画像のサイズを比例して拡大縮小する必要があります。最近のゴルフ Web サイト (http://www.changligolfsales.com) を例に挙げます。

この Web サイトでは、ゴルフ製品の画像をアップロードし、リストにサムネイルとして表示する必要があります。サイト サーバーは Asp をサポートしていますが、aspjpeg などのサムネイル生成コンポーネントをサポートしていないため、アップロードされた画像が直接サムネイルとして表示されます。前提として、画像の長さと幅を取得する必要があります。最初に思いつく方法は、アップロード時に ADODB.STREAM オブジェクトを通じて画像の長さと幅の情報を読み取り、保存することです。をデータベースに保存し、ページ生成時に読み取って比率を計算します。この方法の明らかな欠点は、各画像をサーバー上で読み取って計算する必要があるため、より多くのリソースを消費し、ページを開く遅延が増加することです。
2 番目の方法では、JavaScript を使用して計算をクライアントに転送します。

原則は、クライアントで Javascript を使用して各画像のサイズを読み取り、ページが読み込まれた後に拡大縮小します (onload トリガー)。

コードをコピー コードは次のとおりです:

//imageDest 画像を比例的に拡大縮小します。幅W、高さHの領域に表示
function ResizeImage(imageDest, W, H)
{
//表示ボックス幅W、高さH
var image = new Image() ;
image.src = imageDest.src;
if(image.width>0 && image.height>0)
{
//アスペクト比を比較
if(image.width/ image.height >= W/H)//相対表示フレーム: width > height
{
if(image.width > W) //幅が表示フレームの幅 W より大きい場合、高さを圧縮する必要があります
{
imageDest.width = W;
imageDest.height = (image.height*W)/image.width;
}
else //幅は小さくなります表示ボックスの幅 W 以上で、画像は完全に Display
{
imageDest.width = image.width;
imageDest.height = image.height;
else//同様に
{
if(image.height > H)
{
imageDest.height = H;
imageDest.width = (image.width*H) /image.height;
}
else
{
imageDest.width = image.height;
}
}
}
}


上記の関数は画像を拡大縮小します。
ゴルフ Web サイトの各サムネイルの ID は、次のように imgProductItem に設定されます: の場合、内側の 150x113 が表示ボックスの最大サイズです。onload の完了時に処理関数を実行する必要があるため、ここで特定のサイズを設定する必要があります。そうでない場合は、全体がページは画像読み込みプロセス中に読み込まれます。植字の乱れがありましたが、RsizeAllImageById を実行すると正常に戻りました。

バッチ操作関数を追加します:

コードをコピーします コードは次のとおりです: // ページ内の指定された ID を持つすべての画像を比例的に拡大縮小します

function RsizeAllImageById(id, W, H)

{
var imgs = document.getElementsByTagName("img");
for(var i) = 0; i{
if(imgs[i].id == id)
{
ResizeImage(imgs[i], W, H); 🎜 >}
}
}


このように、

コードをコピー

コードは次のとおりです: ; 先頭領域に追加します:

はすべての画像をサムネイルとして表示します。