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 :

[pastacode lang= »markup » manual= »%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22js%2Fjquery-1.3.2.min.js%22%3E%3C%2Fscript%3E%0A%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22js%2Fjquery-ui-1.7.2.custom.min.js%22%3E%3C%2Fscript%3E%0A%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22js%2Fjquery.cropzoom.js%22%3E%3C%2Fscript%3E » message= » » highlight= » » provider= »manual »/]

 

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 :

[pastacode lang= »javascript » manual= »%24(document).ready(function()%7B%0Avar%20cropzoom%20%3D%20%24(‘%23crop_container’).cropzoom(%7B%0Awidth%3A640%2C%0Aheight%3A480%2C%0AbgColor%3A%20’%23CCC’%2C%0AenableRotation%3Atrue%2C%0AenableZoom%3Atrue%2C%0Aselector%3A%7B%0Ax%3A0%2C%0Ay%3A0%2C%0Aw%3A200%2C%0Ah%3A100%2C%0AaspcetRatio%3Afalse%2C%0Acentered%3Atrue%2C%0AborderColor%3A’blue’%2C%0AborderColorHover%3A’yellow’%2C%0AbgInfoLayer%3A%20’%23FFF’%2C%0AinfoFontSize%3A%2010%2C%0AinfoFontColor%3A%20’blue’%2C%0AshowPositionsOnDrag%3A%20true%2C%0AshowDimetionsOnDrag%3A%20true%2C%0AmaxHeight%3A%20null%2C%0AmaxWidth%3A%20null%0A%7D%2C%0Aimage%3A%7B%0Asource%3A’xray-linux.jpg’%2C%0Awidth%3A1920%2C%0Aheight%3A1450%2C%0AminZoom%3A30%2C%0AmaxZoom%3A100%2C%0Arotation%3A0%0A%7D%0A%7D)%3B%0A%7D)%3B » message= » » highlight= » » provider= »manual »/]

 

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/

Author: Franck Pertegas

Share This Post On

2 Comments

Trackbacks/Pingbacks

  1. jQuery – 20 plugin jQuery à retenir | LudiBlog - [...] Je vous en parle ici Plugin impressionnant de manipulation d’image, utilisant jQuery UI. Le [...]

Submit a Comment

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