Javascriptを使って画像の元の幅と高さを取得する方法を詳しく解説

前書き

JavaScript を使用して画像の元の幅と高さを取得する方法はインターネット上にたくさんありますが、この記事ではこの問題について再度説明します。これは一部の人にとって役立つかもしれません。

メソッドの詳しい説明

ページ内のimg要素の元のサイズを取得したい場合、例として幅を取る場合、最初に思い浮かぶのは要素のinnerWidth属性、つまり幅です。 jQueryの()メソッド。

以下の通り:

<img  id="img" src="1.jpg" alt="Javascriptを使って画像の元の幅と高さを取得する方法を詳しく解説" >
 
<script type="text/javascript">
 var img = document.getElementById("img");
 console.log(img.innerWidth); // 600
</script>

写真のサイズが取得できるようです。

ただし、たとえば img 要素に width 属性を追加すると、画像の実際の幅は 600 ですが、幅は 400 に設定されます。このとき innerWidth は 600 ではなく 400 です。明らかに、innerWidth を使用して画像の元のサイズを取得することは信頼できません。

これは、innerWidth プロパティが画像の元の幅ではなく、要素ボックス モデルの実際にレンダリングされた幅を取得するためです。

<img  id="img" src="1.jpg"    style="max-width:90%" alt="Javascriptを使って画像の元の幅と高さを取得する方法を詳しく解説" >
 
<script type="text/javascript">
 var img = document.getElementById("img");
 console.log(img.innerWidth); // 400
</script>

jQueryのwidth()メソッドは最下位レベルでinnerWidthプロパティを呼び出すため、width()メソッドで取得した幅は画像の元の幅ではありません。

では、img 要素の元の幅を取得するにはどうすればよいでしょうか?

naturalWidth /naturalHeight

HTML5は、画像の元の幅と高さを直接取得できる新しい属性naturalWidth/naturalHeightを提供します。これら 2 つのプロパティは、Firefox/Chrome/Safari/Opera および IE9 に実装されています。

は以下の通りです:

var naturalWidth = document.getElementById('img').naturalWidth,
 naturalHeight = document.getElementById('img').naturalHeight;

主要ブラウザでのnaturalWidth/naturalHeightの互換性は以下の通りです:

そのため、IE8との互換性を考慮しなければ安心してnaturalWidth/naturalHeight属性を使用できます。 。

IE7/8 での互換性の実装:

IE8 以前のバージョンのブラウザーは、naturalWidth 属性と NaturalHeight 属性をサポートしていません。

IE7/8 では、次のように new Image() を使用して画像の元のサイズを取得できます:

function getNaturalSize (Domlement) {
 var img = new Image();
 img.src = DomElement.src;
 return {
  width: img.width,
  height: img.height
 };
}
 
// 使用
var natural = getNaturalSize (document.getElementById('img')),
 natureWidth = natural.width,
 natureHeight = natural.height;

IE7+ ブラウザーと互換性のある関数のカプセル化:

function getNaturalSize (Domlement) {
 var natureSize = {};
 if(window.naturalWidth && window.naturalHeight) {
  natureSize.width = Domlement.naturalWidth;
  natureSizeheight = Domlement.naturalHeight;
 } else {
  var img = new Image();
  img.src = DomElement.src;
  natureSize.width = img.width;
  natureSizeheight = img.height;
 }
 return natureSize;
}
 
// 使用
var natural = getNaturalSize (document.getElementById('img')),
 natureWidth = natural.width,
 natureHeight = natural.height;

概要

以上がこの記事の全内容です。皆さんの勉強や仕事に少しでもお役に立てれば幸いです。ご質問がある場合は、メッセージを残して連絡してください。

JavaScript を使用して画像の元の幅と高さを取得する方法の詳細な説明については、PHP 中国語 Web サイトの関連記事に注目してください。