Recadrer et redimensionner les images avec ce plugin jQuery simple

Recadrage dynamique est plus facile que jamais grâce à des bibliothèques telles que jQuery. Le code base est facile à utiliser et la communauté a des milliers de plugins pour manipulation des images.

Un tel plugin est Cropper, une solution de recadrage d’images open source gratuite qui gère zoom, recadrage, et même enregistrer des images.

Ce projet est disponible sur GitHub avec une certaine très longue documentation avec des dizaines de fonctionnalités personnalisées.

Cropper vous donne (le développeur) un contrôle complet sur tous les aspects de l'interface. Vous pouvez travailler avec 30+ options différentes et 20 méthodes personnalisées intégré dans le plugin Cropper.

Ses entièrement tactile, il fonctionne donc sur tous les appareils mobiles et prend en charge la molette de défilement / le trackpad pour effectuer un zoom avant et arrière sur les photos. Les utilisateurs peuvent retourner, tourner, échelle, et repositionner des photos n'importe où sur la toile avant le recadrage.

Le plugin Cropper nécessite une copie de jQuery et cela vient avec deux fichiers: une feuille de style CSS et la bibliothèque de plugins JavaScript. Il suffit d’ajouter ces fichiers à votre page et cela devrait aller.!

Rappelez-vous, cet outil vient avec beaucoup de fonctionnalités. La documentation en ligne peut aider, mais vous devrez vous salir les mains. configurer vous-même un champ de téléchargement d'images pour tout apprendre. Leur exemple de code juste renvoie tout à la console et ressemble à ceci:

 $ ('# image'). cropper (aspectRatio: 16/9, crop: function (e) // Affiche les données de résultat pour le recadrage de l'image. console.log (ex); console.log (ey); console. log (e.width); console.log (e.height); console.log (e.rotate); console.log (e.scaleX); console.log (e.scaleY);); 

Mais, vous devriez vraiment jeter un coup d'oeil au démo en direct pour voir comment tout cela fonctionne.

Tu peux trouver données de sortie en direct des coordonnées X / Y, avec le dimensions de l'image près du sommet. Cropper comprend également un fonctionnalité de téléchargement où l'utilisateur peut sélectionner une image de son ordinateur et commencer à le recadrer directement dans le navigateur.

Vignettes en direct mise à jour dans le coin, vous pouvez ainsi voir à quoi ressemble le résultat final avant de sauvegarder. Modifier le ratio d'aspect, la qualité de sortie, la position de recadrage par défaut, et tout un tas plus.