WebKit ブラウザで実際の画像の寸法を正確に取得するにはどうすればよいですか?

WebKit ブラウザで実際の画像の寸法を取得する

WebKit ブラウザで JavaScript を使用して、画像の実際の幅と高さを決定しようとします。 Safari または Chrome では、値がゼロになることがよくあります。これは、WebKit がイメージが完全にロードされた後にのみこれらのプロパティを更新するためです。

この制限を克服するには、タイムアウトの代わりにイメージの onload イベントを利用することをお勧めします。このアプローチにより、実際の寸法をより正確に取得できるようになります。

var img = $("img")[0]; // Retrieve the image element
var pic_real_width, pic_real_height;

$("<img/>") // Create an in-memory copy to prevent CSS interference
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width; // Note: $(this).width() won't work for in-memory images.
        pic_real_height = this.height;
    });

この手法により、CSS スタイルの影響を受けることなく実際の画像の寸法を取得できます。

もう 1 つのオプションは、 HTML5 属性の NaturalHeight と NaturalWidth。これらの属性は、CSS の操作に関係なく、スタイルの設定されていない画像の固有の寸法を提供します。

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

これらのメソッドを実装することで、Safari や Chrome などの WebKit ブラウザで画像の実際の寸法に正確にアクセスできます。

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