WebKit ブラウザで画像のサイズを正確に取得するにはどうすればよいですか?

Webkit ブラウザで画像の寸法を正確に取得する

Safari や Chrome などの Webkit ブラウザでは画像の実際の寸法を測定するのが難しい場合があります。インラインの幅と高さの属性を削除したり、画像の実際の寸法を測定したりするような従来の方法では、画像のロード後にブラウザが設定する寸法を考慮できません。

画像の Onload イベントを利用する

タイムアウトに依存する代わりに、より信頼性の高いアプローチは、イメージの onload イベントを利用することです。これにより、画像が完全に読み込まれた後で寸法をキャプチャできます。

var img = $("img")[0]; // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;   // Note: $(this).width() will not
        pic_real_height = this.height; // work for in memory images.
    });

NaturalHeight 属性と NaturalWidth 属性の活用

最新のブラウザは、HTML5 属性の NaturalHeight と NaturalWidth をサポートしています。これにより、CSS に関係なく画像の実際の寸法が得られます。このアプローチはより簡潔です:

var pic_real_width = img.naturalWidth;
var pic_real_height = img.naturalHeight;

これらの技術を利用すると、Webkit ブラウザで画像の実際の幅と高さを正確に取得でき、より正確な画像の操作と表示が可能になります。

以上がWebKit ブラウザで画像のサイズを正確に取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。