JavaScript が 3 つのメソッドを使用して画像サイズを変更する方法の詳細な説明-jsチュートリアル-php.cn

JavaScript が 3 つのメソッドを使用して画像サイズを変更する方法の詳細な説明

黄舟

リリース： 2017-07-26 13:57:06

オリジナル

1673 人が閲覧しました

ご存知のとおり、カラフルな Web コースウェアは画像のサポートと切り離せません。画像は Web ページの鮮明さを高めますが、Web ページのサイズも大きくなり、ダウンロード速度も遅くなります。 Web サイトのページ上に適切なサイズで画像を表示する方法は、研究する価値のある問題です。この目的のために、著者は、脚本家がお互いを励まし合うために参考となるように、自身の経験のいくつかを書き留めました。

要件分析: この Web サイトはニュース管理システムを使用しています。ホームページのニュース欄では、画像ファイルを画像ニュース内の画像としてデータベースから呼び出す必要があるため、テキストの折り返しフォームを形成します。レイアウトのニーズに応じて、画像の幅は 200 ピクセルを超えることはできません。

画像を適切なサイズで表示できるようにするという問題は、本質的には、大きな画像を同じ比率で縮小するという問題です。画像の URL から画像のサイズ (幅、高さ) を取得する方法が問題の鍵となります。K>=1 の場合、k=幅/高さは画像の比率値を表すとします。幅は 200 ピクセルを超えてはならず、高さは =1 が幅を制限する限り、K

オプション 1: JavaScript の Image() オブジェクトを使用して画像を動的にロードし、画像の高さと幅を取得します。

<scriptlanguage="JavaScript" type="text/javascript">
<!--varimgObj;function checkImg(theURL){var width,height;var k;imgObj =new Image();    
//创建对象；
imgObj.src = theURL;   
if (typeof(imgObj) =="object"){if ((imgObj.width != 0) && (imgObj.height != 0)){width=imgObj.width; //是否已取得了图像的宽度；       
height=imgObj.height; 
//是否已取得了图像的高度；      
 k=width/height; 
 //获取图像比例值；        
 if(k>=1){         
 if (width>=200){          
 width=200;          
 height=width/k;         
 }}        
 else                
 {if (height>=200){          
 height=200;           
 width=k?height;           
 }          
 }
 showimg(theURL,width,height);       
 }   
 else    
 setTimeout("checkImg(&#39;" + theURL + "&#39;)", 100) 
 //通过Image对象动态装载图片，不可能立即得到图片的宽度和高度，所以每隔100毫秒重复调用检查。
 }
 }
 functionshowimg(theURL,x,y){document.write("<imgsrc="+theURL+""+"width="+x+""+"height="+y+"border=&#39;0&#39;"+""+"align=&#39;left&#39;>");}   //-->
 </script>
 <scriptlanguage="javascript">checkImg("Bt0085.jpg");
 </script>

ログイン後にコピー

結果: コードはホームページファイル (default.asp) に移植され、サーバーテストに合格すると問題が発生しました。 URLを入力すると、まずブラウザに加工画像が表示され、ツールバーの「戻る」をクリックするとホームページのコンテンツが表示されます。再度テストしたところ、結果は正常でした。写真を更新するたびに同じ現象が発生するか、このウェブサイトを訪問していないコンピュータが開くたびに同じ問題が発生します。

原因分析: Image() オブジェクトの特性は、主に画像のスクロール効果を実現するために使用され、画像間の切り替えに時間遅延が発生しないように、画像を事前にクライアントにダウンロードできます。以下のコードのように、Image オブジェクトの src 属性を使用して画像のパス (URL) を指定すると、images ディレクトリ内の画像 pic2.gif がクライアントにダウンロードされます。 var myImg = newImage();myImg.src = "pic.gif";

このコードは、指定された画像がクライアントのキャッシュ (キャッシュ) にある場合、ブラウザーにサーバーからのダウンロードを強制的に開始します。自動的に上書きされます。そうすることで、ユーザーが画像上でマウスを移動すると、画像は遅延なく即座に変化します。そのため、最初に画像を表示すると、2 回目からは正常にホームページファイルが表示されるようになります。このことから、Image() オブジェクトを使用して画像のプロパティを取得することはできないため、問題の解決策を変更する必要があるという結論に達しました。

オプション 2: の ID を使用して画像の幅と高さを定義します

ページの要素は、その表示範囲、つまり、画像の高さと幅 (幅) を定義できます。画像。処理イベントがトリガーされると、グラフの 2 つのプロパティを動的に変更することで効果を実現できます。

<script>
functionshow()   
{var w,h;   
var k;   
var con;  
w=smallslot.width;  
 h=smallslot.height;   
 k=w/h;  
 if(k>=1){         
 if (w>=200){           
 w=200;          
 h=w/k;         
 }}         
 else                
 {if(h>=150){           
 h=150;          
  w=k?h;          
  }           
  }       
  return w;
  }
  </script>
  <imgborder=0 ID="smallslot" src="4.jpg" onload="javascript:width=x;"align="left">
  <script languge="javascript">      
   varx=show();   
   </script>

ログイン後にコピー

このコードでは、処理後の画像の幅をshow()関数の戻り値として使用しています。 onload イベントを使用して、内の画像の幅を呼び出します。

問題: ホームページの写真ニュースの写真が正常に表示されるようにするには、アドレスバーの「移動」ボタンをクリックします。練習すればまた失敗するよ！なぜなら、インターネットユーザーが慣れ親しんでいるのは、URL を入力して Enter キーを押すことだけだからです。これに基づいて、作成者は次の試みを行いました: (1) との間に「」を追加します。。 10秒ごとに画面が自動的に更新されるので、正常に表示されるのですが、常に画面が更新されるので非常に不快です。 (2) window.location.reload() はページを再読み込みしますが、結果として常にページの読み込み中となり、Web ページが正しく表示されません。 (3)、テストはパスしますが、画像が幅<高さ、および幅>200ピクセルの場合、ページの表示効果は高さが150を超えることになります。このように、K=width または K=height の制約が無い場合は、ページ効果が無理があるため使用できません。

オプション 3: の Onload() イベントをに配置して、ページの読み込み時にイベントをトリガーします

オプション 2 を注意深く分析した結果、主な理由は次のとおりであることがわかりました。 onload イベントは、いつトリガーされるページ読み込みイベントです。ここで IE が解釈する場合、onload は「javascript:width=x;」をトリガーするためにページを読み込む必要があるため、画像を表示するにはページを再読み込みする必要があります。さらに、Onload() は通常、ページの読み込み時にトリガーされるイベントを事前完了するために要素で使用されます。そこで、の Onload() イベントをに配置します。コードは次のとおりです。

<body onload="window.smallslot.width=show();">
<script>       
function show()           
{…..
//show()       
}
</script>
<img border=0 ID="smallslot"src="1.jpg" align="left">
this is atest!

ログイン後にコピー

　再次测试，通过了，而且首页调用成功！我成功了！　　经过这次经历，让笔者感受到了从事程序开发工作的艰辛和乐趣！有时为了一个小小的问题折腾得茶饭不思，但成功的喜悦又让人溢于言表。任何事情只要自己能刻苦钻研、持之以恒，相信问题总会得到解决的。

以上がJavaScript が 3 つのメソッドを使用して画像サイズを変更する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。