Dimensions image à partir de l'url

Version imprimable

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:

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

Salut,

Je ne sais pas pourquoi tu utilises la fonction getImageSize, mais de toute façon tu peux faire plus simple :

Code:

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:

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);
 });
});

12/09/2019, 15h57
thirt

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
12/09/2019, 16h07
Toufik83

Citation:

Envoyé par thirt

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...

Bonjour Toufik83,

merci pour votre réponse.

Voici mon code :

Code:

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

12/09/2019, 18h07
Invité

Bonjour,

Code:

$('.site-content').on('click', '.manage-article', function(e){

C'est, effectivement, de la délégation. :ccool:

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:

$("#carousel").each(function(index, item) {

Ici, tu utilises un id ("#carousel") (élément UNIQUE) ?
Alors que .each() est censé concerner plusieurs éléments... ? :koi:
12/09/2019, 20h02
Toufik83
Code:

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.
12/09/2019, 22h36
thirt

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
13/09/2019, 07h32
Invité

Citation:

Envoyé par thirt

... 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

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:

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

13/09/2019, 08h50
Invité

Libre à toi de construire ton usine à gaz.
Après tout, ça fait aussi partie de l'apprentissage.

Bonne journée.

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:

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:

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/09/2019, 09h18
Invité

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...
13/09/2019, 10h46
NoSmoking
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:

1 2 3 .carrousel img { max-width: 100%; }
ou encore affiner si il y en a plusieurs suivant la largeur du viewport.