Bonjour mes amis zéros.

J'ai découvert qu'il était possible de redimensionner des images via le plugin jCrop de jQuery.
Je suis donc allé fouillé la doc et j'ai trouvé le code suivant, qui couplé à PHP permet de créer une image réduite.

Je n'ai pas de problème avec PHP et j'ai bien compris le fonctionnement de leur fonction. Ce qui me pose problème c'est la compréhension du code javascript fourni par la doc.

<script language="Javascript">

// Remember to invoke within jQuery(window).load(...)
// If you don't, Jcrop may not initialize properly
jQuery(window).load(function(){
	jQuery('#cropbox').Jcrop({
		onChange: showPreview,
		onSelect: showPreview,
		aspectRatio: 1
		});
	});

// Our simple event handler, called from onChange and onSelect
// event handlers, as per the Jcrop invocation above
function showPreview(coords){
	if (parseInt(coords.w) > 0){
		var rx = 100 / coords.w;
		var ry = 100 / coords.h;
					
		jQuery('#preview').css({
			width: Math.round(rx * 500) + 'px',
			height: Math.round(ry * 370) + 'px',
			marginLeft: '-' + Math.round(rx * coords.x) + 'px',
			marginTop: '-' + Math.round(ry * coords.y) + 'px'
		});
	}
}
</script>

Ce que j'ai du mal a comprends, c'est n'est pas de savoir comment on se sert de jCrop, je l'ai très bien compris. Ce que je ne comprends pas c'est la logique employée dans la fonction "showPreview()".

Pourquoi 100/coords.w, ... ?

Voici au passage la page de démo sur laquelle j'ai trouvé le code ci-dessus.

http://deepliquid.com/projects/Jcrop/d [...] emo=thumbnail

Merci de prendre du temps pour m'aider.

Bah 100*100, ce sont les dimensions du carré "preview"...

Ha c'est déjà une chose, merci et pour le reste ?
Pourquoi des marges négatives ?

En fait, l'élément d'id preview, c'est la grand image placée dans un div 100*100 en overflow:hidden.

Donc il faut redimensionner l'image de sorte à ce que la partie sélectionnée fasse la taille du div (d'où rx et ry), et il faut ensuite positionner l'image pour qu'on voit la partie sélectionnée. C'est là que les margin entrent en jeu. C'est pour positionner l'image derrière le petit div.

Donc, si je comprends bien.
La div qui se "déplace" sur l'image en fonction des coordonnées captée par le cadre de sélection. Tout ça grâce aux marges négatives.

J'ai bien saisi ?

Je sais pas, je comprends pas la phrase

Bon, je recommence :




En rouge, on a les coordonnées du début de la sélection. En bleu, on a les dimensions de la sélection.

En vert, le petit div 100*100 en overflow hidden, et le rectangle bleu c'est la même image que l'originale, redimensionnée et placée dans le div.

Le rectangle jaune, tu fais abstraction. Il n'a rien à faire là.


Avant tout, il faut calculer le ratio entre le div 100*100 et le carré tracé sur l'original. Ce sont les valeurs rx et ry.
Si on trace un carré de 200*200, rx et ry vaudront tous deux 0.5.

Grâce à ce ratio, on peut redimensionner l'image cachée derrière le petit div.
Dans l'exemple que je viens de donner, on multiplierait la largeur et la hauteur de l'original par 0.5
C'est ce qui est fait dans le JS lignes 21 et 22.
La nouvelle largeur et la nouvelle hauteur sont tracées en violet sur mon schéma.



Ensuite, maintenant qu'on a l'image de la bonne taille, il faut la placer de sorte à ce que le div 100*100 laisse apparaître la même zone que celle tracée sur l'originale.
La distance de déplacement se calcule de la même manière que le redimensionnement, sauf que cette fois, on utilise les coordonnées du point de départ de la sélection.
Les margin seront mis en négatifs afin de décaler l'image vers en haut à gauche par rapport à l'angle supérieur gauche du petit div.

Si les margins étaient positifs, l'image se décalerait vers en bas à droite...

Les margins (en valeur absolue) sont représentés en orange sur le schéma.

EDIT :
Pour t'aider à visualiser en direct, tu peux lancer ce bookmarklet sur la page de la démo :

javascript:var p=document.getElementById('preview');p.style.opacity='0.3';p.parentNode.style.overflow='visible';p.parentNode.style.border='3px solid red';void(0);

Super, ça c'est une explication qui tiens la route.
Cette fois, j'ai tout compris. Ça m'embêtais vraiment d'utiliser un code tout fait que je ne comprenais pas.

Un grand merci à toi