[javascript] Création d'image, connaître sa taille

**LE NEINDRE** · 19/10/2006, 13h50

Bonjour à tous !!
Voici mon problème.

J'ai un script perl qui me génère des graphes de taille diverses et qui me retourne le lien vers l'image créée.
Je passe ce lien à une fonction javascript afin de réaliser un effet (je suis sous ie) de transition entre une image de départ et l'image passée en argument de la fonction.

Voici mon script javascript:

NB: La fonction Make_Effect permet de réaliser un effet de transition entre image1 et image2
Avec divID : le div qui contient l'image
img : le chemin complet de l'image créée précédemment

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
 
var MyFilters = new Array();
 
MyFilters[0]= "progid:DXImageTransform.Microsoft.Wheel(duration=2);";
MyFilters[1]= "progid:DXImageTransform.Microsoft.CheckerBoard(duration=2)";
MyFilters[2]= "progid:DXImageTransform.Microsoft.GradientWipe(duration=2)";
MyFilters[3]= "progid:DXImageTransform.Microsoft.Iris(duration=2)";
MyFilters[4]= "progid:DXImageTransform.Microsoft.Pixelate(duration=2)";
MyFilters[5]= "progid:DXImageTransform.Microsoft.RadialWipe(duration=2)";
MyFilters[6]= "progid:DXImageTransform.Microsoft.RandomDissolve(duration=2)";
MyFilters[7]= "progid:DXImageTransform.Microsoft.Spiral(duration=2)";
MyFilters[8]= "progid:DXImageTransform.Microsoft.Stretch(duration=2)";
MyFilters[9]= "progid:DXImageTransform.Microsoft.Wheel(duration=2);";
MyFilters[10]= "progid:DXImageTransform.Microsoft.RadialWipe(duration=2)";
MyFilters[11]= "progid:DXImageTransform.Microsoft.Pixelate(duration=2)";
 
function Random()
{
return Math.round(Math.random()*MyFilters.length);
}
 
 
function Make_Effect(divID,img)
{
 
  ImgID = "myImg";
  image1 = document.createElement('img');
  image1.src = '../images/test2.png';
  image1.id = ImgID;
 
 
  image2 = document.createElement('img');
  image2.src = img;
 
  document.getElementById(divID).style.position="absolute";
  document.getElementById(divID).style.left=(document.body.scrollWidth/2)-(image1.width/2);
  document.getElementById(divID).style.top=(screen.height/2)-(image1.height/1.3);
  document.getElementById(divID).appendChild(image1);
  document.getElementById(ImgID).style.filter=MyFilters[Random()]; 
  document.getElementById(ImgID).filters[0].Apply();
  document.getElementById(ImgID).src = image2.src;
  alert(image2.style.width);
  document.getElementById(ImgID).filters[0].Play();
 
}

Et voici le code HTML de ma page:

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
 
 
 
<html>
<head>
<link rel='stylesheet' href='../style.css' type='text/css' media='screen' />
<script language="javascript" src="../graph_effect.js" type="text/javascript"></script>
</head>
 
<body class='Body2' onload="Make_Effect('DivImg','../perlgraph/TX2_lines_Evolution_PerMonthNetherlands_UYmDvM.gif');">
 
<TABLE width=50% align='center'>
 
<TR><TD align='center' class='Title'>Lines evolution per month - Netherlands</TD></TR>
 
</TABLE>
 
 
<DIV id='DivImg'></DIV>
 
</body>
 
</html>

Mais mon problème, c'est que la taille de mon image2 peux varier alors que celle de image1 restera toujours fixe (500*500).
Donc je me retrouve parfois avec une image2 aplatie ou trop agrandie ...

Je voudrais savoir s'il est possible de récupérer la largeur et hauteur de mon image2 et de l'appliquer à image1 pour que la transition se termine sur l'affichage de image2 dans sa "vraie" taille.

Merci mille fois pour votre aide !!!

**SpaceFrog** · 19/10/2006, 13h52

a part coller l'image dans un div et en recupérer la taille, non ...

**LE NEINDRE** · 19/10/2006, 14h04

Il faudrait que je créé un div intermédiaire sans l'afficher dans le body ?
que j'insère l'image dedans ?
et que je récupère la taille du div
que je supprime ce 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
 
 
function getSize(img)
{
      var img_size = new Array(2);
      var div_temp = document.createElement('div');
      div_temp.id='tmp';
 
      div_temp.appendChild(img);
 
      size[0] = div_temp.style.width;
      size[1] = div_temp.style.height;
 
      document.removeChild(div_temp);
}

Puis je reprends ma fonction Make_Effect()

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

function Make_Effect(divID,img)
{
  
  ImgID = "myImg";
  image1 = document.createElement('img');
  image1.src = '../images/test2.png';
  image1.id = ImgID;
 
  
  image2 = document.createElement('img');
  image2.src = img;
 
  var Size = getSize(image2);
  image1.style.width=Size[0];
  image1.style.height=Size[1];


  document.getElementById(divID).style.position="absolute";
  document.getElementById(divID).style.left=(document.body.scrollWidth/2)-(image1.width/2);
  document.getElementById(divID).style.top=(screen.height/2)-(image1.height/1.3);
  document.getElementById(divID).appendChild(image1);
  document.getElementById(ImgID).style.filter=MyFilters[Random()]; 
  document.getElementById(ImgID).filters[0].Apply();
  document.getElementById(ImgID).src = image2.src;
  document.getElementById(ImgID).filters[0].Play();
  
}

C'est cela qu'il faut que je fasse ? ça marcherai ?

**SpaceFrog** · 19/10/2006, 14h05

ben il n'y a aucun autre moyen de recupérer le format de l'image en javascript ...

ou un truc du genre:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
var getsize=document.createElement('img')
getsize.style.zIndex=0
getsize.scr="ball.gif"
getsize.style.display='block'
document.body.appendChild(getsize)
var Size=getsize.offsetHeight
getsize.style.display='none'
alert(Size)

**LE NEINDRE** · 19/10/2006, 14h13

Et bien je vais tenter ça alors ...
Je reviens fermer le post si c'est résolu !!
Merci SpaceFrog !

**SpaceFrog** · 19/10/2006, 14h53

tiens une chtite fonction ...

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
<script type='text/javascript'>
function GetPicSize(Picture){
var PicDim=new Array()
var getsize=document.createElement('img')
getsize.id='temp'
getsize.style.zIndex=0
getsize.scr=Picture
getsize.style.display='block'
document.body.appendChild(getsize)
 PicDim[0]=getsize.offsetWidth
 PicDim[1]=getsize.offsetHeight
document.body.removeChild(getsize)
return PicDim
}
 
</script>

**LE NEINDRE** · 19/10/2006, 15h18

SpaceFrog,
j'avais fais la même chose mais avec l'image dan sun div donc complétement inutile et de plus, ça ne marche plus et je sais pas pourquoi

J'ai essayé ta fonction: elle marche très bien !! Mais y juste un souci !!

La taille qu'elle me ressort est 28*30 alors que l'image que je lui passe est de 500*400 !!!

Comment ça se fait ??
J'y suis presque mais ça bloque encore .... rrraaa

**LE NEINDRE** · 19/10/2006, 15h49

Le 28*30 vient du fait que le lien de l'image n'est pas trouvé, donc l'image n'est pas affiché (seulement la petite icone qui dit que l'image n'ets pas trouvée ...) et cette icone fait 28*30.

Mais mon problème, c'est que le lien vers l'image que je passe à la fonction GetPicSize existe !! J'en suis sur puisque je l'affiche ensuite dans la fonction Make_Effect (mais avec un taille de 28*30 ... maintenant !!)

Comment ça se fait .....

**SpaceFrog** · 19/10/2006, 15h50

arf faut sans doute coller un setTimeout pour lui laissee le temps de charger l'image ou avoir préloadé les images avant ...

**LE NEINDRE** · 19/10/2006, 15h55

Tu crois ?
Je comprends pas bien

J'ai fait le test en passant le lien avec une autre image qui est dans le même répertoire que les autres que j'affiche:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
 
var mySize = GetPicSize('../images/test.png');

Et j'obtiens le même résultat ...

**SpaceFrog** · 19/10/2006, 16h18

oui en fait le format qu'il te sort c'est le format de la petit icone image ...

met un setTimeout sur la recuperation du height et width ...

**LE NEINDRE** · 19/10/2006, 16h23

J'ai fait 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 GetPicSize(Picture)
{
    var getsize=document.createElement('img');
    getsize.id='temp';
    getsize.style.zIndex=0;
    getsize.src=Picture;
    getsize.style.display='block';
    document.body.appendChild(getsize);
 
    setTimeout("function(){var PicDim = new Array();PicDim[0]=getsize.offsetWidth;PicDim[1]=getsize.offsetHeight;alert(PicDim[0]);return PicDim; }",2000);
}

Mais ça ne marche pas ! Pas d'erreur mais pas d'alerte !!
De plus est-ce que, l'éxécution de la fonction GetPicSize() attendra la fin du setTimeout avant de sortir et avant que la suite du code continue ?

Désolé pour ces questions ... mais j'ai peur de plus bien piger le déroulement ...

**SpaceFrog** · 19/10/2006, 16h57

une variante ...

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
<script type='text/javascript'>
var checkload
function GetPicSize(Picture){
var PicDim=new Array()
var getsize=document.createElement('img')
getsize.src=Picture
getsize.style.visibility='hidden'
document.body.appendChild(getsize)
checkload= setInterval(function(){if(getsize.complete){
											PicDim[0]=getsize.offsetWidth
											PicDim[1]=getsize.offsetHeight
											document.body.removeChild(getsize)
											alert(PicDim);
											clearInterval(checkload);
											}}
											,100)
 
}
 
</script>

le seul souci avec la fonction est qu'il faudra aussi mettre une boucle sur la reception de la valeur...
je m'explique si tu mets

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

obj.style.height=GetPicSize('pic.bmp')

il prendra la valeur au moment de l'interprétation de la ligne ..

il faudra faire le même principe de boucle en testant la value de PicDim ...

**LE NEINDRE** · 19/10/2006, 17h34

SpaceFrog, je m'en suis sorti avec le setTimeout.
J'ai fais ainsi:

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
 
 
var PicDim=new Array();
PicDim[0]=500; //default width value
PicDim[1]=500; //default height value
var DIV;
var PIC;
 
function Make_Effect(divID,Picture)
{
 
    DIV = divID;
    PIC = Picture;
    var getsize=document.createElement('img');
    getsize.id='temp';
    getsize.style.zIndex=0;
    getsize.style.visibility='hidden';
    getsize.src=Picture;
    getsize.style.display='block';
    document.body.appendChild(getsize);
    setTimeout("PicDim[0]=document.getElementById('temp').offsetWidth;PicDim[1]=document.getElementById('temp').offsetHeight;Make_Effect_Transition(DIV,PIC)",500);
    //document.body.removeChild(getsize);
 
 
 
}
 
function Random()
{
 
      return Math.round(Math.random()*MyFilters.length);
}
 
 
function Make_Effect_Transition(divID,img)
{
 
  ImgID = "myImg";
  image1 = document.createElement('img');
  image1.src = '../images/test2.png';
  image1.id = ImgID;
 
  image1.style.width=PicDim[0];
  image1.style.height=PicDim[1];
 
 
  image2 = document.createElement('img');
  image2.src = img;
 
 
  document.getElementById(divID).style.position="absolute";
  document.getElementById(divID).style.width=PicDim[0];
  document.getElementById(divID).style.height=PicDim[1];
 
  document.getElementById(divID).style.left=(document.body.scrollWidth/2)-(parseInt(PicDim[0])/2);
  document.getElementById(divID).style.top=(screen.height/2)-(parseInt(PicDim[1])/2);
  document.getElementById(divID).appendChild(image1);
  document.getElementById(ImgID).style.filter=MyFilters[Random()]; 
  document.getElementById(ImgID).filters[0].Apply();
  document.getElementById(ImgID).src = image2.src;
 
  document.getElementById(ImgID).filters[0].Play();
 
}

Cela fonctionne bien !!! Merci beaucoup

Cependant, je regarderai ton autre méthode .

Je mets donc résolu, soulagé....

[javascript] Création d'image, connaître sa taille

JavaScript

Discussions similaires

Partager

Partager