ブラウザを超えた元の画像サイズの決定

クライアント側でサイズ変更された画像の元の物理的寸法を決定することは、クロスブラウザチャレンジ。ただし、これを実現するための信頼性が高く、フレームワークに依存しない方法があります。

オプション 1: 動的な画像寸法の読み取り

画像 HTML から事前定義された幅と高さの属性を削除します。要素。システムは、ディスプレイのニーズに合わせて寸法を自動的に調整します。次に、JavaScript を使用して要素の offsetWidth プロパティと offsetHeight プロパティにアクセスします。これらのプロパティは、サイズ変更された幅と高さを表します。

オプション 2: JavaScript 画像オブジェクト

JavaScript 画像オブジェクトを作成します。そして、サイズ変更された画像のソースをその src プロパティに割り当てます。画像が読み込まれると、オブジェクトの幅と高さのプロパティは元の寸法を保持します。 onload イベントを利用してこの操作を非同期に実行し、寸法を取得する前に画像が完全にロードされるようにすることができます。

コード例:

function getImgSize(imgSrc) {
  var newImg = new Image();

  newImg.onload = function() {
    var height = newImg.height;
    var width = newImg.width;
    alert('The image size is '   width   '*'   height);
  };

  newImg.src = imgSrc; // Do this after setting `onload`
}

注: 大きな画像で寸法が返されないという問題が発生した場合は、JavaScript オブジェクト内で onload イベントを使用することを検討してください。これにより、プロパティにアクセスする前に画像が完全にロードされることが保証されます。