5

JavaScriptコードに画像を追加していますが、正しい幅と高さを取得したいと考えています。これは可能ですか？私のコードは次のようになります。

$('body').append('<img src="path.jpg" width="'
        + w + '" height="' + h + '" alt="" />');

ロード後に画像の幅を取得する方法は知っていますが、をロードしていてimg、対応する幅と高さを直接取得したいと考えています。任意のヒント？

4

5 に答える 5

2

画像を読み込んだ後、画像のサイズを取得できます。

var imageWidth;
var imageHeight;
$('<img>').on('load', function(){ 
    imageWidth = this.width; 
    imageHeight = this.height; 
    $('body').append($(this));
}).attr('src', imageUrl);
于 2012-12-07T22:36:11.253 に答える
1

HTML仕様では、マークアップとスタイルルールを組み合わせてHTMLドキュメントの視覚的表現を構築するビジュアルエージェントのヒントとして、およびを指定することを推奨していheightますwidth。CSSボックスモデルでは、画像の寸法は固有です。つまり、バイナリブロブに暗黙的に含まれています。これは、ブラウザがHTTP応答を待ってから、画像の大きさ、つまり兄弟と親のレイアウトと配置の方法を決定する必要があることを意味します。HTMLページでサイズを指定すると、サーバーから画像をダウンロードする前に幅と高さを割り当てることができるため、ブラウザでページをすばやくレンダリングできます。<img>

この時点で、ダウンロードする前にクライアントの画像幅にアクセスする方法がないことは明らかです。Javascriptがそれを知っているとき、ブラウザはすでに知っていて、あなたはそれがあなたの要件には遅すぎると述べています。

したがって、ブラウザにヒントを与える唯一のオプションは、サーバー側で画像を測定することです。リクエストごとに実行することも（ただし、リソースの浪費です）、画像を最初にアップロードしたとき（次にデータベースから取得したとき）に1回実行することも、最終的には一定と見なすこともできます。プロフィール写真の場合、サービスは常に正確にW x Hピクセルサイズに拡大または縮小されます（これは構成パラメーターである可能性があります）。

于 2012-12-07T23:15:26.490 に答える
0 
var image = new Image;
image.src = $('img').prop('src');
alert($(image).prop('height'))
于 2012-12-07T22:43:47.193 に答える
0

画像をすぐに表示しなくても、事前に画像を読み込むことができます。

var img = document.createElement('img');
img.src = 'your_image.jpg';
var imgHeight = img.height,
    imgWidth = img.width;

これで、必要なときにいつでも、正しい詳細とともに呼び出すことができます。

于 2012-12-08T02:23:14.390 に答える
0

WordPressで画像のサイズを出力する新しい関数を作成して、WordPressで取得できるようにすることにしました。

function wpsc_the_product_dimensions( $width='', $height='', $product_id='' ) {
    if ( empty( $product_id ) )
        $product_id = get_the_ID();


    $product = get_post( $product_id );

    if ( $product->post_parent > 0 )
        $product_id = $product->post_parent;

    $attached_images = (array)get_posts( array(
                'post_type' => 'attachment',
                'numberposts' => 1,
                'post_status' => null,
                'post_parent' => $product_id,
                'orderby' => 'menu_order',
                'order' => 'ASC'
            ) );


    $post_thumbnail_id = get_post_thumbnail_id( $product_id );

    $image_attributes = wp_get_attachment_image_src( $post_thumbnail_id, 'large' );

    $image_dimensions = 'product-link="'.$image_attributes[0].'" product-width="'.$image_attributes[1].'" product-height="'.$image_attributes[2].'"';

    return $image_dimensions;
}

image_dimensionsをimgに添付し、javascriptを使用して取得します

w = $(this).attr('product-width');
h = $(this).attr('product-height');
于 2013-01-04T14:58:38.537 に答える