WebKit ブラウザ (Safari および Chrome) で画像のサイズを正確に取得する方法は?

Webkit ブラウザ (Safari、Chrome) での正確な画像サイズの取得

JavaScript 画像操作の領域では、画像の実際の幅と高さを取得することが課題となる場合があります特に Safari や Chrome などの Webkit ブラウザで発生します。

問題概要

Firefox 3、IE7、および Opera 9 で jQuery を利用する場合、次のコード スニペットは実際の画像の寸法を効果的に抽出します。

var pic = $("img");
pic.removeAttr("width");
pic.removeAttr("height");
var pic_real_width = pic.width();
var pic_real_height = pic.height();

ただし、Webkit ブラウザでは、このアプローチでは不正確な結果が得られます。値は 0 です。

解決策: Javascript の画像読み込みイベント

解決策は、image 要素の onload イベントを利用することにあります。以下の変更されたコードはこれを実現します。

var img = $("img")[0]; // Get the image element

$("<img  alt="WebKit ブラウザ (Safari および Chrome) で画像のサイズを正確に取得する方法は?" >") // Make a virtual copy of the image to prevent CSS interference
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;
        pic_real_height = this.height;
    });

画像のメモリ コピーを作成し、load イベント内で this キーワードを利用することにより、画像の寸法を変更する可能性のある潜在的な CSS 効果をバイパスします。

代替: HTML5 画像属性

HTML5 ブラウザとの互換性のために、naturalHeight と NaturalWidth を利用することもできます。属性:

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

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