javascript 이미지 크기 가져오기 및 image_javascript 기술 확대

1) 이미지 크기 가져오기

코드 복사 코드는 다음과 같습니다.

< ;img src="http://img.my.csdn.net/uploads/201309/03/1378223257_7957.jpg" alt="MM" title="MM(실제 크기 200*300)" onclick= "getWH(this )" width="200" height="300"/>
<script> <br>function getWH(t){ <br>//DOM 속성<br>console.log(" width=" t .width);//200 <br>console.log("height=" t.height);//300 <br>//작동 스타일<br>console.log("styleWidth=" t. style.width) ;//Empty<br>console.log("styleHeight=" t.style.height);//Empty<br>} <br> </div> <br><strong>2) 이미지 가져오기 size (너비를 높게 설정하지 마세요)</strong> <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="27658" class="copybut" id="copybut27658" onclick="doCopy('code27658')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code27658"> <br><img src="http ://img.my.csdn.net/uploads/201309/03/1378223257_7957.jpg" alt="MM" title="MM(실제 크기 200*300)" onclick= "getWH(this)"/> <br><script> <br>function getWH(t){ <br>//DOM 속성<br>console.log("width=" t.width);// 200 <br>console.log("height ="t.height);///300 <br>//작업 스타일<br>console.log("styleWidth=" t.style.width);//Empty<br>console.log("styleHeight=" t .style.height);//Empty<br>} <br> </div> <br>스타일에서 명시적으로 설정하지 않는 한 너비와 높이는 항상 비어있을 것입니다! <br><br><strong>3) 사진 확대하기 </strong>: <br><br>여기서 사진 확대 시 심각한 왜곡을 방지하기 위해 IE의 전용 속성을 사용합니다! <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="5632" class="copybut" id="copybut5632" onclick="doCopy('code5632')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code5632"> <br><img src="http:/ /img.my.csdn.net/uploads/201309/03/1378223257_7957.jpg" alt="MM" title="MM(실제 크기 200*300)" onclick="getWH(this)" width="200" 높이 ="300 "/> <br><script> <br>function getWH(t){ <br>t.width *= 2 <br>t.height *= 2; , 너비 두 배로 확대 <br>} <br></script>

4) FF와 Google에서는 naturalWidth 및 naturalHeight를 사용하여 원래 크기를 얻을 수도 있습니다. 이미지!

코드 복사 코드는 다음과 같습니다.

<script> <br>function getWH(t){ <br>console.log("width=" t.naturalWidth); <br>console.log(" height=" t.naturalHeight); <br>t.width = t.naturalWidth * 2; <br>t.height = t.naturalHeight * 2; <br>} <br></script>

naturalWidth 및 naturalHeight는 읽기 전용 속성이며 이미지 크기를 설정하는 데 사용할 수 없으며 지속적으로 확대할 수 없습니다.