Prototype sur image ?

**SpaceFrog** · 15/02/2007, 17h20

C'est possible ou pas ?
Je n'y arrive pas ...

**SpaceFrog** · 15/02/2007, 17h32

En fait voilà ce que j'essaye de passer en prototype d'une image :

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
 
<script type='text/javascript'>
 
var H=true
var W=false
 
function GetImageSize(path,D){
	var GhostImage=new Image()
	GhostImage.src=path
	var TH=GhostImage.height
	var TW=GhostImage.width
	GhostImage=null
	return D?TH:TW;}
 
</script>

**Auteur** · 15/02/2007, 18h17

bonjour,

là je ne comprends pas ton script

Il y a un lien avec cette discussion ?

C'est surtout ton paramètre D qui m'intrigue et tes variables H et W qui sont à false.

**mikemarti** · 15/02/2007, 20h31

D doit être un booléen (soit H soit W)
et donc la fonction retourne soit la longueur soit la largeur...
C'est quoi le problème en fait ?

**Auteur** · 15/02/2007, 23h56

D'abord je suis tombé sur cet article :
http://developer.mozilla.org/fr/docs...%A0_JavaScript

Et à partir de là j'ai fait deux scripts :

-Sur celui-ci j'ai fait un prototype sur String (c'est un exemple de l'article que j'ai légèrement modifié) : ça marche avec IE (en fait avec ma vieille version 5 d'IE

) et Firefox.

Code html :

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
 
<html>
<head>
<title></title>
<script type='text/javascript'>
<!--
 String.prototype.inverse = function() 
 {
    var r = "", i;
    for (i = this.length - 1; i >= 0; i--) {
        r += this.charAt(i);
    }
    return r;
}
function testString()
{
 var s = document.getElementById("idSpan").innerHTML;
 alert(s.inverse())
}
 
//-->
</script>
 
</head>
 
<body onload="testString()">
 
<span id="idSpan">SpaceFrog</span>
 
</body>
 
</html>

-Sur celui-ci je l'ai fait avec l'objet Image(). IE5 renvoi un message d'erreur (la méthode n'est pas gérée par l'objet), mais il fonctionne avec Firefox :

Code html :

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
 
<html>
<head>
<title></title>
<script type='text/javascript'>
<!--
Image.prototype.getImageSize = function()
  {
        var GhostImage = new Image();
        GhostImage.src = this.src;
        var TH =  GhostImage.height;
        var TW = GhostImage.width;
        GhostImage = null;
        return TH+" "+TW;
  }
 
function testImage()
{
  var elmt = document.getElementById("idImg");
 
  alert(elmt.getImageSize());
}
 
//-->
</script>
 
</head>
 
<body onload="testImage()">
 
<img id="idImg" style="width:50px" src="DSC00582B.JPG" />
 
</body>
 
</html>

Chose intéressante : lorsque l'image n'existe pas H et W renvoient 0.

**SpaceFrog** · 19/02/2007, 08h49

On ne pourrait donc pas sous IE coler un prototype sur une image ??

**SpaceFrog** · 19/02/2007, 17h03

Oulà shame on me !!!

je l'utilise pas là le prototype ...
et on dirait bien que sue Object non plus on ne puisse pas affecter un prototype ?

**Auteur** · 19/02/2007, 18h28

j'ai fait un truc, qui ne me donne pas une entière satisfaction :

Code html :

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
 
<html>
<head>
<title></title>
<script type='text/javascript'>
<!--
var myImage = function(idImage)
{
   this.image = document.getElementById(idImage);
 
   if (this.image.tagName.toLowerCase()=="img")
   {
     if (this.image.readyState!=null) //pour IE
     {
       if (this.image.readyState.toLowerCase()!="complete")
          this.image = null;
     }
   }
   else
       this.image = null;
}
 
myImage.prototype =
{
  getImageSize : function(D)
  {
     var GhostImage = new Image();
     var TH, TW;
     TH = 0; TW = 0;
     if (this.image!=null)
     {
       GhostImage.src = this.image.src;
       TH =  GhostImage.height;
       TW = GhostImage.width;
       GhostImage = null;
     }
     return (D)?("H= "+TH):("W= "+TW);
  }
  ,
  getImage : function()
  {
     return this.image;
  }
  ,
  isImage : function()
  {
     return (this.image.tagName.toLowerCase()=="img")?true:false;
  }
}
 
function testImage()
{
  var Img1 = new myImage("idImg");
  var Img2  = Img1.getImage();
 
  alert(Img1.isImage());
 
  alert("Taille réelle : "+Img1.getImageSize(false));
 
  alert("Taille à l'écran : H= "+Img2.height+" W="+Img2.width);
}
 
//-->
</script>
 
</head>
 
<body onload="testImage()">
 
<img id="idImg" style="width:150px" src="i5.gif" />
 
</body>
 
</html>

J'ai créé un objet myImage qui prend comme paramètre l'id de l'image choisie. Dans le constructeur, je teste la balise de l'objet (je vérifie que c'est une balise img).

Le readyState c'est pour IE : c'est pour véifier que l'image est chargée, sinon TH et TW renvoient n'importe quoi (contrairement à FF qui retourne 0,0 si l'image n'est pas chargée).

Puis je crée le prototype :
j'ai supprimé le paramètre path de la fonction getSizeImage car cette donnée est contenue dans this.image.

myImage ne renvoie l'objet image originale uniquement avec la méthode getImage()

ce qui me permet d'obtenir les autres propriétés.

On pourrait dire que j'ai créé un objet parent (myImage) à l'objet Image().