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) 画像を取得しますサイズ (幅を High に設定しないでください)</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" height ="300 "/> <br><script> <br>t.width *= 2; <br>//各クリック、幅 高さを 2 倍に拡大 <br>} <br></script&gt <BR><BR> <BR></div>4) FF と Google では、naturalWidth と NaturalHeight を使用して元のサイズを取得することもできます。画像！ <BR> <STRONG></STRONG><BR><div class="codetitle"><span>コードをコピー <a style="CURSOR: pointer" data="45153" class="copybut" id="copybut45153" onclick="doCopy('code45153')"><U></U> コードは次のとおりです: </a></span> </div><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"/> <div class="codebody" id="code45153"><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 は読み取り専用のプロパティであり、画像のサイズの設定に使用したり、継続的に拡大したりすることはできません。