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

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager