recadrer (rogner) une image

Version imprimable

19/10/2004, 09h55
prodi_64

recadrer (rogner) une image

Bonjour,

je suis en train de faire un applicatif qui contient un zoom et une carte de situation.
J'ai trouvé comment zooemr et dezoomer, mais mon pb est quand le zoom engendre un agrandissement de l'image trop important. Je m'explique : je voudrais que mon image ne depasse pas un certain cadre en pixel. Il faut donc que je puisse la rogner, une fois que ce seuil est atteint.
Je ne sais pas comment le faire!

Peut etre que je m'y prend mal avec du javascript, je ne sais pas! l'important est que mon aplicatif doit etre embarqué sur un cd et donc avec des technologies simples.

Tant que j'y suis, si qqun sait comment mettre à jour la cadre de sélection sur ma carte de situation.

Merci beaucoup
19/10/2004, 09h59
SpaceFrog

mets ton 'cadre' en overflow hidden, pui en gérant le top et le left ...
19/10/2004, 10h02
prodi_64

peux-tu m'expliquer ce que font les top et left, et ce qu'est un overflow?

merci
19/10/2004, 10h09
SpaceFrog

bon ben commentçons par le commencement

un div tu vois ce que c'est ?
tu lui fixe une taille

Code:

<div style="height:100px;width:100px;"> </div>

si tu le remplis avec plus qu'il ne peut contenir, des barres de scroll apparaitront (ascenceurs)

si tu rajoutes overflow hidden:

Code:

<div style="height:100px;width:100px;overflow:hidden;"> </div>

si tu mets un contenu plus grand que 100x100px ce qui dépasse sera caché...

maintenant si dans ce div tu place un autre div tu peux le positionner comme tu veux de façon n'avoir visible que la zone qui t'intéresse en le positionnant avec Left et Top qui gère la position du coin en haut à gauche de ce div ...(et par conséquent de tout le div ...)
19/10/2004, 10h30
prodi_64

je te remercie, il ne me reste plus qu'à trouver comment recuperer l'endroit où l'on clique sur la photo pour avoir le zoom centré dessus

merci

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
<HTML> 
<HEAD> 
 
<SCRIPT LANGUAGE="JavaScript"><!-- 
if (navigator.appName == 'Netscape') { 
document.captureEvents(Event.MOUSEMOVE); 
document.onmousemove = netscapeMouseMove; 
} 
 
function netscapeMouseMove(e) { 
if (e.screenX != document.test.x.value && e.screenY != document.test.y.value) { 
document.test.x.value = e.screenX; 
document.test.y.value = e.screenY; 
} 
} 
 
function microsoftMouseMove() { 
if (window.event.x != document.test.x.value && window.event.y != document.test.y.value) { 
document.test.x.value = window.event.x; 
document.test.y.value = window.event.y; 
} 
} 
//--></SCRIPT> 
 
</HEAD> 
 
<BODY onmousemove="microsoftMouseMove()"> <!-- onmousedown="microsoftMouseMove()" onmouseup="microsoftMouseMove()" --> 
 
<FORM NAME="test"> 
X: <INPUT TYPE="TEXT" NAME="x" SIZE="4"> Y: <INPUT TYPUE="TEXT" NAME="y" SIZE="4"> 
</FORM> 
 
</BODY> 
</HTML>

19/10/2004, 11h57
prodi_64

je te remercie beaucoup, grace à toi, j'ai bien avancé!

il est possible que je te recontacte si j'ai un autre souci...

merci encore