IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Dimensions image à partir de l'url


Sujet :

jQuery

  1. #1
    Nouveau membre du Club
    Homme Profil pro
    Consultant informatique
    Inscrit en
    Août 2019
    Messages
    51
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : Belgique

    Informations professionnelles :
    Activité : Consultant informatique
    Secteur : Finance

    Informations forums :
    Inscription : Août 2019
    Messages : 51
    Points : 39
    Points
    39
    Par défaut 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 :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
     
    $(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 ?

    En fait, comme c'est une fonction callback, toutes les images sont parcourues avant que les résultats ne puissent être exploités. Comment puis-je faire pour récupérer ces résultats dans un tableau ou comment puis-je faire pour obtenir les dimensions image par image ?

    Merci d'avance

    Bonne soirée
    Thierry

  2. #2
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 405
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 405
    Points : 4 841
    Points
    4 841
    Par défaut
    Salut,

    Je ne sais pas pourquoi tu utilises la fonction getImageSize, mais de toute façon tu peux faire plus simple :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <div class='carousel'>
      <img data-name='img1' src="https://via.placeholder.com/150/0000FF/808080 /">
      <img data-name="img2" src="https://via.placeholder.com/250/FF0000/FFFFFF /">
      <img data-name="img3" src="https://via.placeholder.com/350/FFFF00/000000 /">
      <img data-name="img4" src="https://via.placeholder.com/450/000000/FFFFFF /">
    </div>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
     
    $(document).ready(function(){
       var containerWidth = 180;
       var containerHeight = 180;
       var t_img=[],pictureWidth,pictureHeight,name;
       $(".carousel").each(function(index, item) {
    	$(item).find("img").each(function(index, img) {
               pictureWidth = $(img).prop('width'); //ou clientWidth
               pictureHeight = $(img).prop('height'); // ou clientHeight
               name=$(img).attr('data-name');
               $(img).css({
                   'width': pictureWidth + 'px',
                   'height': pictureHeight + 'px'
              });
     
          /* on ajoute les infos de chaque image dans le tableau t_img */
          t_img.push({'name':$(img).attr('data-name'),
          "width":pictureWidth,
          "height":pictureHeight}); 
     
          console.log("img name : :", name, 
         	", w :", pictureWidth, 
         	', height :', pictureHeight);
       });
       console.log('t_img :',t_img);
     });
    });

  3. #3
    Nouveau membre du Club
    Homme Profil pro
    Consultant informatique
    Inscrit en
    Août 2019
    Messages
    51
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : Belgique

    Informations professionnelles :
    Activité : Consultant informatique
    Secteur : Finance

    Informations forums :
    Inscription : Août 2019
    Messages : 51
    Points : 39
    Points
    39
    Par défaut
    Bonjour Toufik83,

    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

  4. #4
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 405
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 405
    Points : 4 841
    Points
    4 841
    Par défaut
    Citation Envoyé par thirt Voir le message
    Par contre, quand je dois rajouter un article avec des images en Ajax, le carousel ne réagit plus bien.
    C'est parce que les articles sont insérés dynamiquement, il faut passer par délégation pour attacher les événements aux ".carousel".

    Pour que l'on puisse mieux t'aider, il faut nous montrer comment tu rajoutes les articles et a quel moment...

  5. #5
    Nouveau membre du Club
    Homme Profil pro
    Consultant informatique
    Inscrit en
    Août 2019
    Messages
    51
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : Belgique

    Informations professionnelles :
    Activité : Consultant informatique
    Secteur : Finance

    Informations forums :
    Inscription : Août 2019
    Messages : 51
    Points : 39
    Points
    39
    Par défaut
    Bonjour Toufik83,

    merci pour votre réponse.

    Voici mon code :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
     
        $('.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;
    }
    Bonne soirée
    Thierry

  6. #6
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
        $('.site-content').on('click', '.manage-article', function(e){
    C'est, effectivement, de la délégation.

    Donc : explique clairement "ce qui ne va pas comme tu veux" ?
    (je n'ai pas lu la suite du code... *)

    * [EDIT] Si, un peu :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    				$("#carousel").each(function(index, item) {
    Ici, tu utilises un id ("#carousel") (élément UNIQUE) ?
    Alors que .each() est censé concerner plusieurs éléments... ?
    Dernière modification par Invité ; 13/09/2019 à 07h05.

  7. #7
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 405
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 405
    Points : 4 841
    Points
    4 841
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    // J'aurais bien aimé avoir les dimensions de mon image
    var pictureWidth = $(img).prop('naturalWidth');	// renvoie 0
    var pictureHeight = $(img).prop('naturalHeight');	// renvoie 0
    Je viens de tester et je reçois bien les dimensions des images (j'ai utilisé des vraies images et je n'ai pas spécifié ni le width ni le height) puis le carousel apparaît bien.

  8. #8
    Nouveau membre du Club
    Homme Profil pro
    Consultant informatique
    Inscrit en
    Août 2019
    Messages
    51
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : Belgique

    Informations professionnelles :
    Activité : Consultant informatique
    Secteur : Finance

    Informations forums :
    Inscription : Août 2019
    Messages : 51
    Points : 39
    Points
    39
    Par défaut
    Bonjour Toufik83 et Jérôme,

    tout d'abord, merci pour votre aide.

    En fait, j'ai une page web avec tous les articles. Sur ces articles, des actions sont possibles. Pour certaines actions, je dois remplacer le contenu de l'article concerné par l'action par le contenu de l'article mis à jour. Parmi le contenu de l'article se trouve l'affichage du carrousel entre autre. Naturellement, sur la page originale, le script js concernant "owl carousel 2" a bien été chargé. Lors du remplacement de l'ancien contenu de l'article par le nouveau contenu, cela se fait donc en Ajax. Tout fonctionne parfaitement même le carrousel mais le seul souci est le redimensionnement des images. Pour cela, j'ai un conteneur dont je connais la largeur et la hauteur maximale. Je dois donc récupérer les dimensions des différentes images une par une afin d'appliquer la bonne largeur et hauteur sur ces images en mentionnant les propriétés CSS concernant la largeur et la hauteur de l'image. C'est cela que je n'arrive pas à faire car je dois essayer d'obtenir ces infos (largeur et hauteur) à partir de l'URL de l'image. J'arrive à utiliser une fonction qui me renvoie tout à la fin, la largeur et la hauteur de toutes les images mais je ne parviens pas à obtenir la largeur et la hauteur de l'image que je suis en train de traiter. Je n'obtiens le résultat que quand il a fini de traiter toutes les images. Voici le problème que je voulais évoquer dans ce message.

    Merci à vous.

    Bonne soirée
    Thierry

  9. #9
    Invité
    Invité(e)
    Par défaut
    Citation Envoyé par thirt Voir le message
    ... j'utilise "owl carousel 2" pour créer un carrousel...
    ... je dois rajouter un article avec des images en Ajax, le carousel ne réagit plus bien...
    Je n'avais pas vu/lu cette partie...

    Tu aurais dû le dire dès le 1er message *, on aurait TOUS gagné du temps !
    (Et ça t'éviterait de réécrire le plugin...)

    Il suffit de rappeler le script owl carousel DANS la page appelée via Ajax !


    * CONSEIL : arrête de croire que tu es LE PREMIER à utiliser un plugin avec Ajax.
    (Ou que tu es LE PREMIER à utiliser les "grids" CSS...)
    DIS-TOI bien que d'AUTRES ont dû le faire AVANT toi, et qu'ils ont eu les MEMES problèmes !

    DONC : pose la BONNE question tout de suite !


    N.B. Perso, j'utilise Slick
    Dernière modification par Invité ; 13/09/2019 à 07h53.

  10. #10
    Nouveau membre du Club
    Homme Profil pro
    Consultant informatique
    Inscrit en
    Août 2019
    Messages
    51
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : Belgique

    Informations professionnelles :
    Activité : Consultant informatique
    Secteur : Finance

    Informations forums :
    Inscription : Août 2019
    Messages : 51
    Points : 39
    Points
    39
    Par défaut
    Bonjour Jérôme,

    merci pour votre réponse.

    En effet, il suffit de rappeler le script "owl carousel 2".

    Cette partie fonctionne bien mais les images n'ont plus les bonnes dimensions dans le conteneur. Donc, dans ce cas-là, je dois aussi exécuter le traitement qui redimensionne les images. Ce traitement est également exécuté mais je n'arrive pas à obtenir la largeur et la hauteur de mes images en les traitant une par une. Quand j'affiche les propriétés de l'image ($(img).prop('naturalWidth'); et $(img).prop('naturalHeight'), j'obtiens 0. Donc, j'ai essayé d'utiliser une fonction qui me permet de renvoyer les dimensions de l'image à partir d'une url. Cette fonction renvoie les bons résultats mais je n'arrive pas à accéder à ces données juste après l'appel de ma fonction vu qu'il s'agit d'une fonction callbak. Donc, je me demandais comment faire pour appeler cette fonction pour une image dans mon script et pouvoir exploiter le résultat de ma fonction ?

    Voici mon code :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
     
    $('.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){
    			$a.parents('.article').replaceWith($(data)).fadeOut(500).fadeIn(500);
     
    			var $carousel_id = $a.parents('.dropdown').siblings('.slideshow-carousel').children().attr('id');
     
    			$("#" + $carousel_id).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) {
    					// Cette fonction est censée me renvoyer un tableau avec les dimensions de l'image
    					var imgDimensions[] = getMeta($(img).attr('src'));
     
    					// imgDimensions[0] me renverrait la largeur et imgDimensions[1] me renverrait la hauteur
    					var pictureWidth = imgDimensions[0];	// renvoie 0
    					var pictureHeight = imgDimensions[1];	// 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 à vous.

    Bonne journée
    Thierry

  11. #11
    Invité
    Invité(e)
    Par défaut
    Libre à toi de construire ton usine à gaz.
    Après tout, ça fait aussi partie de l'apprentissage.

    Bonne journée.

  12. #12
    Nouveau membre du Club
    Homme Profil pro
    Consultant informatique
    Inscrit en
    Août 2019
    Messages
    51
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : Belgique

    Informations professionnelles :
    Activité : Consultant informatique
    Secteur : Finance

    Informations forums :
    Inscription : Août 2019
    Messages : 51
    Points : 39
    Points
    39
    Par défaut
    Bonjour Jérôme,

    je ne demande pas mieux que ce soit le plus facile et le plus rapide possible ce que j'ai l'intention de faire mais malheureusement, je n'ai pas trouvé la solution.

    Ce dont j'ai besoin, c'est simplement de récupérer les dimensions de mon image à partir de l'url au moment où j'en ai besoin pour redimensionner l'image.

    Je traite image par image et j'aimerais bien récupérer les dimensions de l'image à ce moment-là.

    J'ai trouvé un script js qui me permet de récupérer les dimensions de l'image mais je n'arrive pas à les obtenir au moment où j'en ai besoin malgré le fait que j'appelle ce script juste avant.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    function getMeta(url){   
        var img = new Image();
        img.addEventListener("load", function(){
            alert( "width: " + this.naturalWidth +' et Height : '+ this.naturalHeight );
        });
        img.src = url;
    }
    Je ne comprends pourquoi il faut ajouter un événement de type "load" et qu'on ne peut pas récupérer directement les dimensions de l'image en faisant ceci :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     
    function getMeta(url){   
        var img = new Image();
     
        img.src = url;
     
        var imgDimensions = [];
     
        imgDimensions.push(img.prop('naturalWidth'));
        imgDimensions.push(img.prop('naturalHeight'));
     
        return imgDimensions;
    }
    Donc, voilà simplement ma question : comment puis-je faire pour récupérer les dimensions de mon image à partir de l'url en temps réel.

    Merci d'avance

    Bpnne journée
    Thierry

  13. #13
    Invité
    Invité(e)
    Par défaut
    Non.

    Ce dont tu as besoin, c'est d'utiliser correctement Owl Carousel.
    Or, tu ne montres pas le code, ni même de copie d'écran susceptible de voir le problème.


    Toi, quand un robinet fuit, tu penses juste à éponger.
    Ça ne te vient pas à l'idée de couper l'eau et réparer la fuite...

  14. #14
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 954
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 954
    Points : 44 092
    Points
    44 092
    Par défaut
    Bonjour,
    Citation Envoyé par thirt
    Donc, voilà simplement ma question : comment puis-je faire pour récupérer les dimensions de mon image à partir de l'url en temps réel.
    tant que ton image ne sera pas chargée tu ne pourras pas.

    Il doit bien y avoir moyen de passer par du CSS, par exemple avec un
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    .carrousel img {
      max-width: 100%;
    }
    ou encore affiner si il y en a plusieurs suivant la largeur du viewport.

Discussions similaires

  1. problème récupération image à partir d'une URL
    Par fasfousba dans le forum Développement Web en Java
    Réponses: 6
    Dernier message: 22/02/2009, 19h35
  2. Réponses: 3
    Dernier message: 28/10/2008, 17h04
  3. Affichage image à partir d'un url
    Par mariam2001 dans le forum Servlets/JSP
    Réponses: 2
    Dernier message: 02/07/2007, 16h38
  4. Créer une image à partir d'une URL ?
    Par DrySs dans le forum Langage
    Réponses: 1
    Dernier message: 26/01/2006, 09h39

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo