JavaScript は幅を例として画像の元のサイズを取得します_JavaScript のヒント

ページ内の img 要素の元のサイズを取得したい場合、幅を例に挙げると、最初に次のように幅が考えられます

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

🎜><script> <BR>var img = document.getElementsByTagName('img')[0] <BR>var width = getWH(img, 'width') // 690 <BR></script>

ここで使用される getWH メソッドは前の記事で説明されています。このとき得られる幅は画像の元のサイズと同じになります。

imgにwidth属性を追加した場合、例えば画像の実際の幅が690で、幅が400に設定されている場合、この方法は機能しません。上記の方法で取得した場合。 , 400 が返されます

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

& lt; スクリプト & gt; T.GetelementsBytagname ('IMG') [0]
var width = getWH(img, 'width') // 400



明らかに、400 はそうではありません。画像の元の幅。

それを取得する方法は、新しい img オブジェクトを直接作成し、古い img の src を新しい img に代入することで、新しい img の幅を取得できます。 >

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

<script> <div class="codebody" id="code20683">function getNaturalWidth(img) { <BR>var image = new Image () <BR>image.src = img. src <BR>var NaturalWidth = image.width <BR>return NaturalWidth <BR>} <BR>var img = document.getElementsByTagName('img')[0] <BR> getNaturalWidth(img) // 690 <BR>&lt ;/script> <BR><BR> <BR>ここで新しく作成した画像を DOM ドキュメントに追加する必要がないことに注意してください。 <BR>HTML5 では、画像の元の幅と高さを直接取得できる新しい属性 NaturalWidth/naturalHeight が提供されます。これら 2 つのプロパティは、Firefox/Chrome/Safari/Opera および IE9 に実装されています。画像サイズの取得方法を変更しました。 <BR><br><br><BR><div class="codetitle">コードをコピー<span><a style="CURSOR: pointer" data="60204" class="copybut" id="copybut60204" onclick="doCopy('code60204')"><U> コードは次のとおりです。 function getImgNaturalDimensions(img, callback) { var nWidth, nHeight <div class="codebody" id="code60204">if (img.naturalWidth) { // 最新のブラウザ <BR>nWidth = img.naturalWidth <BR>nHeight = img.naturalHeight <BR>} else { // IE6/7/8 <BR> var imgae = new Image() <BR>image.src = img.src <BR>image.onload = function() { <BR>callback(image.width, image.height) <BR>} <BR> } <BR>return [nWidth, nHeight] <BR>} <BR><BR> <BR>IE6/7/8 の処理に注意して、新しい img を作成し、その src のみを設定します。画像を完全にロードする必要があります。そうすることでのみ、画像の幅と高さを取得できます。したがって、これは非同期であり、コールバックを渡すことができ、元の幅と高さがコールバックのパラメータとして渡されます。 <BR></script>