Jcrop, recadrez dynamiquement vos images avec jQuery

11 août 2011

Jcrop est plugin jQuery qui permet de « cropper » vos images directement à la souris sur une page web ! Cet outil peut donc donner la possibilité aux visiteurs de recadrer eux mêmes des images.

Sortez vos ciseaux

Jcrop utilise la puissance et la flexibilité de jQuery : un code propre et sémantique, compatible avec l’ensemble des navigateurs récents. Il fonctionne avec n’importe quelle image. Il est possible de conserver ou de fixer le ratio, de définir des dimensions fixes « min » et/ou « max », et de déplacer la sélection du « crop » au clavier avec les touches multi-directionnelles. Il est également possible de personnaliser l’apparence de la sélection avec une feuille de style et utiliser des gestionnaires d’événements. Et enfin, il possède un support tactile sur smartphone, mais qui est encore en phase expérimentale.

L’outil est simple à mettre en place. Jcrop transmet les coordonnées du « crop » à un formulaire qui va être soumis à un script PHP. A l’aide d’une librairie PHP, comme GD ou ImageMagick, les données vont être traitées afin d’appliquer le redimensionnement. Vous l’aurez compris, Jcrop ne génère pas l’image sélectionnée ! Il est nécessaire de passer par PHP pour créer la nouvelle image « croppée ». Si vous êtes paresseux, optez plutôt pour une solution sans JavaScript, tel que le script TimThumb, plus simple à utiliser mais beaucoup moins flexible (pas de « crop » à la souris).

Jcrop est compatible avec les principaux navigateurs du marché : Firefox 2+, Safari 3+, Opera 9.5+, Chrome 2.0+, et IE 6+.

Mise en place de Jcrop

Comme pour n’importe quel plugin jQuery, on commence par intégrer la dernière version du framework, le plugin lui-même, et sa feuille de style.

<script src="js/jquery.pack.js"></script>
<script src="js/jquery.Jcrop.pack.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />

Pour la structure HTML, on applique directement un « id » sur l’image que l’on souhaite retoucher.

<img src="flowers.jpg" id="cropbox" />

Et enfin la partie jQuery, on exécute la fonction « Jcrop() » sur l’ « id » sélectionné.

<script language="Javascript">
    jQuery(function() {
        jQuery('#cropbox').Jcrop();
    });
</script>

Les événements

Jcrop supporte deux gestionnaires d’événements :

  • onSelect : gestionnaire declenché lorsque la sélection est terminée
  • onChange : gestionnaire declenché lorsque la sélection se déplace

Pour utiliser ces événements, il faut d’abord définir une fonction :

function showCoords(c)
{
    // variables can be accessed here as
    // c.x, c.y, c.x2, c.y2, c.w, c.h
};

Puis il faut lui attacher les événéments de la façon suivante :

jQuery(function() {
    jQuery('#cropbox').Jcrop({
        onSelect: showCoords,
        onChange: showCoords
    });
});

Exemple :

Les gestionnaires d’événements sont utiles pour enrichir votre application. Par exemple, on peut s’en servir pour afficher les coordonnées et les dimensions du « crop » en temps réel sur la page web.

Les options

Voici les options qui permettent de personnaliser l’apparence et le comportement de votre « crop ».

  • aspectRatio : entier qui définit le ratio (largeur/hauteur, soit 1 pour un carré)
  • minSize : tableau d’entiers qui définit les dimensions minimum du crop
  • maxSize : tableau d’entiers qui définit les dimensions maximum du crop
  • setSelect : tableau d’entiers qui définit des coordonnées d’une séléction initiale
  • bgColor : couleur du background
  • bgOpacity : entier qui définit l’opacité du background (0.6 par défaut)

Et voici un exemple d’utilisation :

    jQuery(function() {
        jQuery('#cropbox').Jcrop({
            onSelect:    showCoords,
            bgColor:     'black',
            bgOpacity:   .4,
            setSelect:   [ 100, 100, 50, 50 ],
            aspectRatio: 16 / 9
        });
    });

Jcrop est donc un plugin idéal pour mettre en place une application de « crop » à la volée sur une page web. C’est le cas du système Gravatar qui permet à un utilisateur d’uploader une photo et la recadrer comme il le souhaite pour générer son avatar.

Requis : jQuery
Démonstration : http://deepliquid.com/projects/Jcrop/demos.php
Licence : MIT

Commentaires

  • Dardoun

    Stop jQuery go starcraft !

  • Plutôt pratique ! merci pour l’astuce :)

  • Pingback: jQuery 38, quoi de neuf ? | MathieuRobin.com()

  • Eddy

    Oui mais si je veux bloquer un ratio de 100x100px pour rogner une partie de mon image et convertir en 100×100 est-ce possible ? C’est à dire que la photo fait 600×600 et je peux ETIRER mon carré sur une zone bloquée (carrée donc) de 500×500 et valider pour convertir ce ratio carré 500×500 en 100×100 pixels, est-ce possible ?