JavaScript가 세 가지 방법을 사용하여 이미지 크기를 수정하는 방법에 대한 자세한 설명

우리 모두 알다시피, 다채로운 웹 코스웨어는 이미지 지원과 불가분의 관계에 있습니다. 이미지는 웹 페이지의 선명도를 높이는 반면, 웹 페이지의 크기를 늘리고 다운로드 속도를 늦추기도 합니다. 웹사이트에서 이미지를 적절한 크기로 페이지에 표시하는 방법은 연구해볼 만한 문제입니다. 이를 위해 작가는 대본 작가들의 참고를 위해 자신의 경험담을 일부 적어 서로 격려하고 있다.

요구사항 분석: 이 웹사이트는 뉴스 관리 시스템을 사용합니다. 홈페이지 뉴스 열에서 이미지 파일을 데이터베이스에서 그림 뉴스의 그림으로 호출하여 텍스트 래핑 형식을 형성해야 합니다. 레이아웃 요구에 따라 이미지 너비는 200px을 초과할 수 없습니다.

이미지를 적절한 크기로 표시하도록 허용하는 문제는 본질적으로 큰 이미지를 축소하는 문제입니다. 이미지의 URL을 통해 이미지의 크기(너비, 높이)를 어떻게 구하느냐가 문제의 핵심입니다. 너비는 200픽셀을 초과하지 않아야 하며 높이는 200픽셀보다 커야 합니다. 반대로 K=1이 너비를 제한하는 한 K

옵션 1: 자바스크립트의 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)를 지정하면 이미지 디렉터리에 있는 pic2.gif 이미지가 클라이언트로 다운로드됩니다. var myImg = newImage();myImg.src = "pic.gif";

이 코드는 브라우저가 서버에서 지정된 이미지를 강제로 다운로드하도록 합니다. 이 이미지가 클라이언트의 캐시(Cache)에 있으면 브라우저는 자동으로 덮어쓰게 됩니다. 이렇게 하면 사용자가 사진 위로 마우스를 이동하면 시간 지연 없이 사진이 즉시 변경됩니다. 그래서 처음에 사진이 표시되면 두 번째부터는 홈페이지 파일이 정상적으로 표시될 수 있는 것입니다. 이를 통해 Image() 객체를 사용하여 이미지의 속성을 얻을 수 없으며 문제 해결 방법을 변경해야 한다는 결론에 도달했습니다.

옵션 2: 873c4d80998f5627c84fe017b9b46671의 ID를 사용하여 이미지의 너비와 높이를 정의합니다.

페이지의 873c4d80998f5627c84fe017b9b46671 요소는 표시 범위, 즉 이미지의 높이와 너비(너비)를 정의할 수 있습니다. 이미지. 처리 이벤트가 트리거되면 그래프의 두 가지 속성을 동적으로 변경하여 효과를 얻을 수 있습니다.

<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 이벤트를 사용하여 873c4d80998f5627c84fe017b9b46671에서 이미지의 너비를 호출합니다.

문제: 홈페이지 사진뉴스의 사진이 표시되지 않습니다. 주소 표시줄의 "이동" 버튼을 클릭하면 정상적으로 표시됩니다. 연습이 또 다른 실패를 말해준다! 인터넷 사용자가 익숙한 유일한 일은 URL을 입력하고 Enter를 입력하는 것뿐이기 때문입니다. 이를 바탕으로 작성자는 다음과 같은 시도를 했습니다. (1) 93f0f5c25f18dab9d176bd4f6de5d30e와 9c3bca370b5104690d9ef395f2c5f8d1 사이에 "1d455c0487951f640ab51b2b9deb260e를 추가합니다. . 화면이 10초마다 자동으로 새로고침이 되기 때문에 사진은 정상적으로 표시가 되지만 화면이 계속해서 새로고침이 되서 매우 불편합니다. (2) window.location.reload()는 페이지를 다시 로드하지만 결과적으로 항상 페이지를 로드하는 중이어서 웹페이지가 제대로 표시되지 않습니다. (3)90e1350e84a8f29eab9528462a6ae8d9200) this.width=200;"align="left">, 테스트는 통과할 수 있지만 이미지가 너비200px인 경우 페이지 표시 효과는 높이가 150을 초과하는 것입니다. 이와 같이 K=너비, K=높이의 제약이 없으면 페이지 효과가 불합리하므로 사용할 수 없습니다.

옵션 3: 페이지가 로드될 때 이벤트를 트리거하려면 873c4d80998f5627c84fe017b9b46671의 Onload() 이벤트를 ff8b6c3e371e9f96acceec65cada5d84 onload 이벤트는 언제 트리거되는 페이지 로딩 이벤트인지 확인하세요. Onload는 9617a69a9711c47d4c7e5f42d8a4909e 요소에서 사용됩니다. 여기서 IE가 이를 해석하면 "javascript:width=x;"를 트리거하기 위해 페이지를 로드해야 하므로 이미지를 표시하려면 페이지를 다시 로드해야 합니다. 또한 Onload()는 일반적으로 페이지를 로드할 때 트리거되는 이벤트를 미리 완료하기 위해 9c5594a5fc8d2e506f1a8147102c836b 요소에서 사용됩니다. 그래서 873c4d80998f5627c84fe017b9b46671의 Onload() 이벤트를 9c5594a5fc8d2e506f1a8147102c836b에 넣었습니다. 코드는 다음과 같습니다.

<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가 세 가지 방법을 사용하여 이미지 크기를 수정하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!