11484 sujets

JavaScript, DOM et API Web HTML5

Obtenir dimensions image à partir de l'URL

Bonsoir à tous,

en fait, j'aimerais bien obtenir les dimensions des images à partir de leur URL. Dans mon cas, j'utilise une fonction callback mais je ne reçois le résultat que quand toutes les images ont été traitées.

Voici une partie du code que j'exécute :



$(document).ready(function(e){
  $(".carousel").each(function(index, item) {
    containerWidth = 180;
    containerHeight = 180;
    
    $(item).find("img").each(function(index, img) {
      var imageSize = getImageSize($(img).attr('src'));

      var pictureWidth = $(img).prop('naturalWidth');
      var pictureHeight = $(img).prop('naturalHeight');
                            
      $(img).css({
        'width': thumbWidth + 'px',
        'height': thumbHeight + 'px'
      });
    });
  });
});

function getImageSize(url, callback) {
    var img = new Image();
    img.src = url;
    img.onload = function() { callback(this.width, this.height); }
}


Comment puis-je faire pour obtenir les dimensions image par image ?

Merci d'avance

Bonne soirée
Thierry
Salut

Petite function pour ça 


function getMeta(url){
    $("<img/>",{
        load : function(){
            alert(this.width+' '+this.height);
        },
        src  : url
    });
}
Bonjour Jencal,

tout d'abord, merci pour votre réponse.

En fait, j'utilise "owl carousel 2" pour créer un carrousel.

Quand j'ai les images dès le départ dans ma page web et le script js à la fin, tout se passe à merveille.

Par contre, quand je dois rajouter un article avec des images en Ajax, le carousel ne réagit plus bien. En fait, je dois redimensionner les images suivant les largeur / hauteur maximales de mon conteneur. Pour cela, j'ai besoin de connaître la largeur t hauteur d'origine de mes images. Pour cela, je n'ai que l'adresse url à ma disposition. Donc, c'est pour cette raison-là que j'essaie d'obtenir la largeur et la hauteur par image à partir de l'url.

Merci d'avance

Bonne journée
Thierry
Hello

Oui j'ai bien compris ton problème

Du coup la méthode que je t'ai partagé permet de récupèrer le width/height d'une image via son URL direct. 

getMeta("https://upload.wikimedia.org/wikipedia/en/thumb/6/63/IMG_%28business%29.svg/1200px-IMG_%28business%29.svg.png");
function getMeta(url){   
    var img = new Image();
    img.addEventListener("load", function(){
        alert( this.naturalWidth +' '+ this.naturalHeight );
    });
    img.src = url;
}


exemple ici : https://codepen.io/JUSEN/pen/mdbKJOp?editors=1010
Bonjour Jencal,

encore merci pour votre aide.

En fait, j'ai du mal à comprendre quelque chose d'élémentaire. En fait, à partir du jQuery, je compte appeler cette fonction me permettant d'obtenir la taille de mon image.

Le problème, c'est que je reçois la réponse une fois qu'il a traité toutes mes images plutôt qu'au traitement d'image par image.

Voici mon code à ce niveau-là :


    $('.site-content').on('click', '.manage-article', function(e){
        e.preventDefault();
        e.stopPropagation();
        var $a = $(this);
        var $url = $a.attr('href');

        $.ajax($url)
            .done(function(data, text, jqxhr){
				$("#carousel").each(function(index, item) {
					var containerWidth = 0;
					var containerHeight = 0;
			
					if ($(window).width() < 640)
					{
						containerWidth = $(item).width();
						containerHeight = $(item).width() / 2;
					}
					else
					{
						containerWidth = 180;
						containerHeight = 180;
					}
			
					$(item).find("img").each(function(index, img) {
						getMeta($(img).attr('src'));

                                                // J'aurais bien aimé avoir les dimensions de mon image
						var pictureWidth = $(img).prop('naturalWidth');	// renvoie 0
						var pictureHeight = $(img).prop('naturalHeight');	// renvoie 0
						
						var ratioWidth = containerWidth / pictureWidth;
						var ratioHeight = containerHeight / pictureHeight;
			
						var ratio = ratioWidth;
			
						if (ratioWidth > ratioHeight)
						{
							ratio = ratioHeight;
						}
			
						var thumbWidth = pictureWidth * ratio;
						var thumbHeight = pictureHeight * ratio;
			
						$(img).css({
							'width': thumbWidth + 'px',
							'height': thumbHeight + 'px'
						});
					}),
					$(item).owlCarousel({
						autoplay: true,
						autoplayTimeout: 10000,
						loop: true,
						responsive:{
							0:{
								items: 1
							},
							640:{
								items: 1
							},
							769:{
								items: 1
							},
							1025:{
								items: 1
							}
						}
					});
				});
            })
            .fail(function(jqxhr){
                alert(jqxhr.responseText);
            })
            .always(function(){
                $a.text('Actions');
            });
    });
});

function getMeta(url){   
    var img = new Image();
    img.addEventListener("load", function(){
        alert( "width: " + this.naturalWidth +' et Height : '+ this.naturalHeight );
    });
    img.src = url;
}


Merci d'avance

Bonne soirée
Thierry
Sujet clos
Aller à