Ottieni la larghezza dell'immagine caricata in JavaScript

Question

Sto aggiungendo un'immagine nel mio codice JavaScript ma voglio ottenere la sua larghezza e altezza corrette. È possibile? Il mio codice è simile al seguente:

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

---

so come ottenere la larghezza dell'immagine dopo che è stato caricato ma sto caricando un img e vuole ottenere la sua larghezza e l'altezza corrispondente direttamente. Qualche consiglio?

Answer 1

Le specifiche HTML raccomanda di specificare height e width per <img> come un suggerimento per un agente visiva, che miscele il markup e le regole di stile per costruire una rappresentazione visiva di un documento HTML. Nel modello box CSS, le dimensioni dell'immagine sono intrinseche, ovvero sono implicite nel blob binario. Ciò significa che un browser deve attendere una risposta HTTP prima di decidere quanto è grande l'immagine e quindi come disporre e posizionare i fratelli e i genitori. La specifica delle dimensioni nelle pagine HTML consente al browser di eseguire rapidamente il rendering della pagina, in quanto può assegnare larghezza e altezza prima di scaricare l'immagine dal server.

A questo punto dovrebbe essere chiaro che non è possibile accedere alla larghezza dell'immagine sul client prima di scaricarlo. Quando lo sa, il browser lo sa già e dichiari che è troppo tardi per le tue esigenze.

Quindi l'unica opzione per suggerire il browser è misurare l'immagine sul lato server. Può essere fatto su richiesta (ma è uno spreco di risorse), o può essere fatto una volta quando l'immagine viene prima caricata (e poi recuperata da un database), o eventualmente può essere assunta come costante, ad esempio se si tratta di un'immagine del profilo, il servizio verrà sempre ingrandito o ridotto per essere esattamente uguale a W x H pixel (potrebbe trattarsi di un parametro di configurazione).

Answer 2

È possibile ottenere dimensioni dell'immagine dopo averlo caricato:

var imageWidth; 
var imageHeight; 
$('<img>').on('load', function(){ 
    imageWidth = this.width; 
    imageHeight = this.height; 
    $('body').append($(this)); 
}).attr('src', imageUrl); 

Answer 3

var image = new Image; 
image.src = $('img').prop('src'); 
alert($(image).prop('height')) 

Answer 4

È possibile caricare l'immagine in anticipo senza dover necessariamente visualizzarla immediatamente.

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

Ora è possibile chiamarlo insieme ai dettagli corretti, in qualsiasi momento.

Answer 5

ho deciso di creare una nuova funzione in wordpress che emette le dimensioni dell'immagine in modo da poter recuperare lo fa con 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; 
} 

e fissare le image_dimensions alla IMG e recuperare lo fa con javascript

w = $(this).attr('product-width'); 
h = $(this).attr('product-height');