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

Webkit ブラウザでの画像のサイズの決定

JavaScript プラグインを開発する場合、画像の実際の幅と高さを取得することが重要です。従来のメソッドは Firefox、IE、Opera では機能しますが、Safari と Chrome では失敗し、戻り値はゼロになります。

WebKit の独自の画像読み込み動作

とは異なります他のブラウザでは、Webkit は画像が読み込まれた後にのみ画像の高さと幅のプロパティを設定します。この動作には、画像の実際の寸法を取得するための別のアプローチが必要です。

图片追加イベントの利用

推奨される解決策には、画像の onload イベントの使用が含まれます。以下は、問題を解決する修正されたコード スニペットです:

var img = $("img")[0]; // Get the image element
var pic_real_width, pic_real_height;
$("<img/>") // Create an in-memory copy to avoid CSS issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;
        pic_real_height = this.height;
    });

CSS 効果の回避

CSS 効果が寸法に影響を与えるのを防ぐために、コードは in-画像のメモリコピー。この手法により、取得された値が実際の画像サイズを正確に反映するようになります。

代替アプローチ: HTML5 属性

HTML5 には、naturalHeight 属性と NaturalWidth 属性が用意されており、これらも使用できます。実際の画像の寸法を取得します。ただし、これらの属性のサポートはブラウザによって異なります。

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