CropZoom – Plugin jQuery – La manipulation d’image avec jQuery

Vous cherchez le moyen de donner la possibilité aux utilisateurs de votre site de sélectionner qu’une partie d’image, de recadrer leurs photos ou de repositionner leur avatar ? Pour cela CropZoom peut vous être très utile, c’est un plugin jQuery vraiment intéressant et prometteur.

cropzoom jquery

Vous allez pouvoir :

– Recadrer une image
– Découper, zoomer ou faire pivoter cette dernière

Voici comment s’implémente le script :

<link href="css/jquery-ui-1.7.2.custom.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.cropzoom.js"></script>

On s’aperçoit qu’il faut utiliser ui de jquery et que pour l’instant on reste sur une version 1.3.x de jquery. Mais la dernière mise à jour étant toute récente on peut s’attendre à une évolution vers une 1.4.x de jquery prochainement.

Voici un exemple d’appel du plugin :

$(document).ready(function(){
          var cropzoom = $('#crop_container').cropzoom({
            width:640,
            height:480,
            bgColor: '#CCC',
            enableRotation:true,
            enableZoom:true,
            selector:{        
              x:0,
              y:0,
              w:200,
              h:100,
              aspcetRatio:false,
              centered:true,
              borderColor:'blue',
              borderColorHover:'yellow',
              bgInfoLayer: '#FFF',
              infoFontSize: 10,
              infoFontColor: 'blue',
              showPositionsOnDrag: true,
              showDimetionsOnDrag: true,
              maxHeight: null,
              maxWidth: null
            },
            image:{
                source:'xray-linux.jpg',
                width:1920,
                height:1450,
                minZoom:30,
                maxZoom:100,
                rotation:0
            }
        });
});

Il existe beaucoup d’options, comme vous pouvez le remarquer. Je vous laisse lire le tableau récapitulatif à cette page, qui est très bien fait et précis sur les diverses options.

Vous pouvez visionner une démo sur la page d’accueil du site du plugin, ça donne pleins d’idées (d’implémentation de code bien sûr) :)

Site du plugin : http://www.cropzoom.com.ar
UI jQuery : http://jqueryui.com/

Comments
  1. willzgui
  2. LudiKadmin

Leave a Reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


*