Pobierz szerokość obrazu załadowanego w JavaScript

Question

Dodaję obraz w moim kodzie JavaScript, ale chcę uzyskać jego prawidłową szerokość i wysokość. czy to możliwe? Mój kod wygląda następująco:

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

---

wiem jak uzyskać szerokość obrazu po załadowaniu ale mam ładowania img i chcą się swoją odpowiednią szerokość i wysokość bezpośrednio. Jakieś wskazówki?

Answer 1

Spec HTML zaleca, aby określić height i width dla <img> jako wskazówka dla agenta wizualnej, co mieszanek znaczników i zasady stylu budowania wizualnej reprezentacji dokumentu HTML. W modelu pudełkowym CSS wymiary obrazu to nieodłączne, tj. Są one niejawne w binarnym obszarze blob. Oznacza to, że przeglądarka musi czekać odpowiedź HTTP przed podjęciem decyzji, jak duży jest obraz, a tym samym, jak rozłożyć i pozycji rodzeństwa i rodziców. Określenie wymiarów na stronach HTML pomaga przeglądarce szybko renderować stronę, ponieważ może ona przydzielić szerokość i wysokość przed pobraniem obrazu z serwera.

W tym momencie powinno być jasne, że nie ma możliwości uzyskania dostępu do szerokości obrazu na kliencie przed jego pobraniem. Kiedy JavaScript to wie, przeglądarka już wiedziała, a ty twierdzisz, że jest za późno na twoje wymagania.

Jedyną opcją wskazującą przeglądarkę jest pomiar obrazu po stronie serwera. Można to zrobić na żądanie (ale jest to marnowanie zasobów), lub można to zrobić raz, gdy obraz jest najpierw wysyłany (a następnie pobierany z bazy danych), lub ostatecznie można założyć, że jest stały, na przykład jeśli jest to zdjęcie profilowe, że twoja usługa zawsze będzie się powiększać lub zmniejszać, aby być dokładnie W x H pikseli (może to być parametr konfiguracyjny).

Answer 2

Można uzyskać rozmiary obrazka po załadowaniu go:

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

Obraz można załadować z wyprzedzeniem, bez konieczności wyświetlania go natychmiast.

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

Możesz teraz zadzwonić wraz z odpowiednimi danymi, kiedy tylko chcesz.

Answer 5

postanowiłem stworzyć nową funkcję w WordPress że wyprowadza wymiary obrazu, dzięki czemu można odzyskać robi z 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; 
} 

i dołączyć image_dimensions z IMG i odzyskać robi z javascript

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