Sujet Précédent Sujet Suivant

Récupérer la largeur et la hauteur d'une image situé dans un tableau

psyckan Messages postés 135 Date d'inscription vendredi 27 août 2004 Statut Membre Dernière intervention 8 mai 2010 - 29 mars 2009 à 22:03
 PetoleTeam - 30 mars 2009 à 17:32
Bonjour,

Mon script est un diaporama qui fonctionne avec des vignettes qu'il faut cliquer pour afficher l'image en taille réelle dans une div.

Pour créer les vignettes, j'aimerais pouvoir récupérer la hauteur et la largeur de l'image de taille réelle afin de la pouvoir la rétrécir selon mes envies.

Code :
// On récupère les dimensions de l'images
height = XXXX;
width = XXXX;

// Tests pour savoir si l'image correspond au tailles voulues
...
// On affiche la vignette
miniatures += "<td>

Les chemins de mes images se trouvent dans un tableau tab_miniatures[]

Je vous remercie
:)

21 réponses

  • 1
  • 2
Réponse 1 / 21
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
30 mars 2009 à 09:39
Bonjour,
ch'tiot exemple ici, si j'ai compris la question (?)
Cordialement
0
Réponse 2 / 21
psyckan Messages postés 135 Date d'inscription vendredi 27 août 2004 Statut Membre Dernière intervention 8 mai 2010
30 mars 2009 à 11:12
Au niveau du la récupération des dimensions de l'image, c'est exactement ce qu'il y a dans ton script pour la carte de la france. Mais je vois pas du tout comment tu fais.
Si tu pouvais m'expliquer un peu juste comment tu fait, stp ?
Merci
0
Réponse 3 / 21
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
30 mars 2009 à 11:23
>>c'est exactement ce qu'il y a dans ton script
pas vu, tu nous l'as mis ?

>>Si tu pouvais m'expliquer un peu juste comment tu fait
euh.. plus d'explications que dans l'exemple où le
code pour faire et les explications existent ?

@+
0
Réponse 4 / 21
psyckan Messages postés 135 Date d'inscription vendredi 27 août 2004 Statut Membre Dernière intervention 8 mai 2010
30 mars 2009 à 11:58
Voila le code :

<script language="javascript">
    tab_photos = new Array;
    tab_miniatures = new Array;
    <?
    $cpt = -1;
    $folder = opendir("photos");
    while (($file = readdir())!=false)
    {
        clearstatcache();
        if($file!=".." && $file!=".")
        {
            $cpt++;
            $img="photos/$file";
            echo "tab_photos[$cpt] = '$img';\n";
            echo "tab_miniatures[$cpt] = '$img';\n";
        }
    }
    closedir($folder);
    ?>

function slide(no)
{
if(document.getElementById)
{
    miniatures = "\";
    for (i=0; i<=<?=$cpt?>; i++)
    {
        miniatures += \", \";
    }
    miniatures += "
";
    document.getElementById("slide").innerHTML = "<center></center>";
    document.getElementById("mini").innerHTML = "<center>"+miniatures+"</center>";
}
}
window.onload = new Function("slide(0)")
   
</script>

Ce que je veut c'est récuperer les dimensions des images juste avant de les afficher pour pouvoir savoir si ce sont des paysages ou des portrait afin de leurs donner les bonnes dimensions, ou pour pouvoir les réduire en miniatures.

Parce que dans le code ci-dessus les images sont toute afficher avec les même dimensions (500,375) et ça marche donc pas pour les portrait.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 21
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
30 mars 2009 à 12:02
>>Ce que je veut c'est récuperer les dimensions des images juste avant de les afficher
pas directement en javascript alors !  regarde coté php...
0
Réponse 6 / 21
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
30 mars 2009 à 12:15
ou alors ne met pas de taille ( width, height )
ça prendra la taille de l'image telle qu'elle a été créée.
0
Réponse 7 / 21
@karamel Messages postés 1854 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 8 avril 2024 153
30 mars 2009 à 12:55
on peut precharger l'image avant de l'afficher

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">

var imt=new Image()

function imtaille(){
imt.src='monimage.jpg'
imt.onload=function(){alert(imt.height)}
}
</script>
</head>

taille

</html>
0
Réponse 8 / 21
psyckan Messages postés 135 Date d'inscription vendredi 27 août 2004 Statut Membre Dernière intervention 8 mai 2010
30 mars 2009 à 14:35
J'ai utilisé ta méthode kazma et ça marche trés bien.
En revanche, j'ai juste un petit problème avec une images portrait 750*1000 ou il me renvoit une largeur de 1000 et pas de 750 comme voulu.

Voila le code :

<script language="javascript">
    var image=new Image()

    function resizeimagewidth(source,div,mult){
    image.src=source;
    width=image.width;
    width/=div;
    width*=mult;
    alert(source+'_width : '+width);
    return width;
    }
    function resizeimageheight(source,div,mult){
    image.src=source;
    height=image.height;
    height/=div;
    height*=mult;
    alert(source+'_height : '+height);
    return height;
    }
   
    tab_photos = new Array;
    tab_miniatures = new Array;
    <?
    $cpt = -1;
    $folder = opendir("photos");
    while (($file = readdir())!=false)
    {
        clearstatcache();
        if($file!=".." && $file!=".")
        {
            $cpt++;
            $img="photos/$file";
            $dim=getimagesize($img);
            echo "tab_photos[$cpt] = '$img';\n";
            echo "tab_miniatures[$cpt] = '$img';\n";
            $dim2=getimagesize($img);
        }
    }
    closedir($folder);
    ?>

function slide(no)
{
if(document.getElementById)
{
    miniatures = "\";
    for (i=0; i<=<?=$cpt?>; i++)
    {
        widthm=resizeimagewidth(tab_miniatures[i],10,4);
        heightm=resizeimageheight(tab_miniatures[i],10,4);
        miniatures += \", \";
    }
    miniatures += "
";
    document.getElementById("mini").innerHTML = "<center>"+miniatures+"</center>";
    width=resizeimagewidth(tab_photos[no],2,1);
    height=resizeimageheight(tab_photos[no],2,1);
    document.getElementById("slide").innerHTML = "<center></center>";
}
}
window.onload = new Function("slide(0)")
   
</script>

J'ai d'abord 4 images paysage de 1000*750 puis une image portrait de 750*1000
0
Réponse 9 / 21
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
30 mars 2009 à 14:52
kazma a raison...
mea culpa : j'avais interprété "sans afficher" par "sans télécharger"
@+
0
Réponse 10 / 21
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
30 mars 2009 à 15:01
mais je pense aussi que changer
le src d'une balise sans width, ni height fonctionnerait.
si j'ai compris le souci....
0
Réponse 11 / 21
psyckan Messages postés 135 Date d'inscription vendredi 27 août 2004 Statut Membre Dernière intervention 8 mai 2010
30 mars 2009 à 15:04
Non parce que mes images font 1000*750 et je afficher des miniatures de 40*30 et les images réelles en 500*375. Donc si je met pas de height ni de width ça va me les charger en 1000*750..
Merci à tout les deux en tous cas et si vous trouvez la solutions au problème ci-dessus, ça serait cool aussi. Je continue a chercher.
0
Réponse 12 / 21
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
30 mars 2009 à 15:17
???
ben... en récupérant la taille de l'image,
ce serait pareil tu vas récupérer 1000*750

ou alors tu divises ces tailles par 2 donc ? pour obtenir 500*375 ?
0
Réponse 13 / 21
@karamel Messages postés 1854 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 8 avril 2024 153
30 mars 2009 à 15:19
dans le script que tu met tu devrait mettre onload qui veut dire quand l'image a ete totalement charge car il est fort possible que vu que l'image n'est pas totalement charge il a encore en memoire la taille de l'image precedente

function resizeimagewidth(source,div,mult){
    image.src=source;
image.onload=function{
    width=image.width;
    width/=div;
    width*=mult;
    alert(source+'_width : '+width);
    return width;
}
    }
0
Réponse 14 / 21
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
30 mars 2009 à 15:31
je suis fatigué moi...

je ne me remet pas d'avoir du me lever à 2 heures ce dimanche
pour passer tous mes réveils/horloges/montres/pc... à 3 heures
( et il y a du monde )
0
Réponse 15 / 21
psyckan Messages postés 135 Date d'inscription vendredi 27 août 2004 Statut Membre Dernière intervention 8 mai 2010
30 mars 2009 à 15:31
En fait le problème se pose juste la premier fois que l'on charge la page.
Toutes les vignettes prennent la taille de la première image.Donc si la première image du dossier est un portrait (40*30) alors toutes les autres vignettes seront affiché dans le format 40*30.

Une fois qu'on clique une vignettes, le problème n'apparait plus et les images ont le bon format.

Sinon j'ai essayer ce que tu m'as dit kazma et ça ne fonctionne pas. Les vignettes ne change pas de dimensions et sont toujours a 1000*750. Ca vient surement du fiat que j'appelle la fonction resizeimagewidth et la fonction resizeimageheight tard dans le script et donc le chargement de la page est déjà fait, non ?
0
Réponse 16 / 21
@karamel Messages postés 1854 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 8 avril 2024 153
30 mars 2009 à 15:46
peut etre
mais tu peut faire qu'une fonction pour height et width car la tu demande de charger a la suite la meme image sa peut etre la  cause du pb

tu peut aussi donner la taille de ton image en fonction de la taille du div qui la contient
0
Réponse 17 / 21
psyckan Messages postés 135 Date d'inscription vendredi 27 août 2004 Statut Membre Dernière intervention 8 mai 2010
30 mars 2009 à 15:47
Ouai bon ça devait etre un problème de chargement des images, donc j'ai mis ça au niveau du lancement de la fonction :

window.onload = setTimeout("slide(0)",1000);

C'est pas trés propre, mais ça marche.
0
Réponse 18 / 21
psyckan Messages postés 135 Date d'inscription vendredi 27 août 2004 Statut Membre Dernière intervention 8 mai 2010
30 mars 2009 à 15:49
Non en fait...
0
Réponse 19 / 21
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
30 mars 2009 à 16:36
on peut revoir ce que tu veux faire ?
je ne sais plus où on en est !

toutes les images sont affichées en miniature ( 40x30 )
et en cliquant sur ces miniatures, tu voudrais afficher
l'image avec sa taille réelle ? ou avec des dimensions spécifiques ?
0
Réponse 20 / 21
psyckan Messages postés 135 Date d'inscription vendredi 27 août 2004 Statut Membre Dernière intervention 8 mai 2010
30 mars 2009 à 16:53
Je viens juste de trouvé une astuce pas trés propre mais ça marche :

<script language="javascript">
var image=new Image()
function resizeimage(source,div,mult)
{
    image.src=source;
    width=image.width;
    height=image.height;
    width/=div;
    width*=mult;
    height/=div;
    height*=mult;
    document.getElementById("info").innerHTML += "Source : "+source+" | Width : "+width+" | Height : "+height+"
";
    return [width,height];
}

tab_photos = new Array;
tab_miniatures = new Array;
<?
    $cpt = -1;
    $folder = opendir("photos");
    while (($file = readdir())!=false)
    {
        clearstatcache();
        if($file!=".." && $file!=".")
        {
            $cpt++;
            $img="photos/$file";
            echo "tab_photos[$cpt] = '$img';\n";
            echo "tab_miniatures[$cpt] = '$img';\n";
        }
    }
    closedir($folder);
?>

function slide(no)
{
    if(document.getElementById)
    {
    document.getElementById("info").innerHTML = "";
        miniatures = "\";
        for (i=0; i<=<?=$cpt?>; i++)
        {
            widthm=resizeimage(tab_miniatures[i],10,4)[0];
            heightm=resizeimage(tab_miniatures[i],10,4)[1];
            miniatures += \", \";
        }
    miniatures += "
";
    document.getElementById("mini").innerHTML = "<center>"+miniatures+"</center>";
    width=resizeimage(tab_photos[no],2,1)[0];
    height=resizeimage(tab_photos[no],2,1)[1];
    document.getElementById("slide").innerHTML = "<center></center>";
    }
   
}
window.onload = new Function("slide(0)")
slide(0);
</script>

Je lance deux fois la fonction slide et je n'ai plus le problème avec les images mais c'est pas trés propre :)
Si toutefois vous avez d'autre solutions...
0

Discussions similaires

langage C : fonction calcul hauteur maximale arbre
lordvan -
lordvan -

4 réponses
vectoriser un logo sous photoshop
cs_babidou -
harleyman37 -

11 réponses
afficher un tableau en php
Larose_1921 -
s -

1 réponse
[Photoshop] : Image noir et blanc en image blanc et noir ?
kristoufiol -
titoine2000 -

4 réponses
[vba] aller chercher des données dans une feuille excel
cokinoumasterflash -
ScSami -

4 réponses
Rejoignez-nous