Plugins gratuits pour le framework JavaScript Mootools 1.2 |
English

<< RETOUR À L'ACCUEIL

ByCropper - Script de recadrage des images

Qu'est-ce que ByCropper ?

ByCropper est un plugin pour Mootools 1.2 qui vous permet de recadrer dynamiquement vos images via JavaScript, et d'envoyer les informations sur un formulaire HTML.

Fonctionnalités

  • Recadrage horizontal et/ou vertical des images.
  • Possibilité d'activer le recadrage proportionnel à la taille d'origine de l'image.
  • Possibilité de définir un ratio personnalisé pour le recadrage de l'image.
  • Possibilité d'utiliser un ratio strict ou non.
  • Possibilité de changer le ratio à la volée.
  • Possibilité de définir une largeur et/ou une hauteur minimum.
  • Possibilité de définir une largeur et/ou une hauteur maximum.
  • Possibilité de personnaliser l'image de bordure.
  • Possibilité de personnaliser la couleur et l'opacité du masque.

Utilisation

HTML

  1. <img src="image.jpg" id="bycropper" />

Javascript

  1. var myCropper = new ByCropper(picture, form, options);

Picture

L'ID de l'image à recadrer.

Form

L'ID du formulaire dans lequel mettre les informations de recadrage (doit contenir les champs "x", "y", "w" et "h").

Options

Option Type Default Description
keepRatio bool false Si true, active le recadrage proportionnel.
ratio array [0, 0] Définit la proportionnalité à appliquer au recadrage. ([2, 1], [4, 3], [16, 9] ...)
Si [0, 0], le ratio sera celui de l'image d'origine.
minWidth int 40 Largeur minimale du recadrage.
minHeight int 40 Hauteur minimale du recadrage.
maxWidth int 0 Largeur maximale du recadrage. 0 si pas de max.
maxHeight int 0 Hauteur maximale du recadrage. 0 si pas de max.
borderPath string '.' URI relative ou absolue du dossier contenant les images de contour.
maskColor string '#000000' Couleur du masque, au format hexadécimal. Noir par défaut.
maskOpacity float 0.7 Opacité du masque, compris entre 0 (transparent) et 1 (opaque).

Méthode publique

La méthode myCropper.changeRatio(ratio) peut être appelée pour redéfinir la proportionnalité à appliquer au recadrage.

Pré-requis

ByCropper est écrit pour Mootools v1.2

Il requiert ces modules (et leurs dépendances) :

  • Element.Dimensions
  • Element.Event
  • Element.Style
  • Class.Extras

Participer

Faire un don

Si vous aimez ce script, et que vous souhaitez participez, vous pouvez envoyer quelques (centimes d') euros. Vous pouvez donner ce que vous souhaitez en cliquant ici (vous pouvez ne RIEN donner en ne cliquant PAS ici ^^) :

Je le veux !

Combien dois-je payer pour l'avoir ?

Rien du tout ! C'est totalement gratuit. Vous pouvez le télécharger, le modifier et l'utiliser dans n'importe quel projet commercial tant que vous respectez la licence. C'est Open Source !

Télécharger

Vous pouvez utiliser ces deux images pour le contour :

License

ByCropper par ByScripts est mis à disposition selon les termes de la licence MIT Open Source.

Exemples

Exemple 1 : Options par défaut

HTML

  1. <img src="eiffeltower.jpg" id="bycropper" />

Javascript

  1. var myCropper = new ByCropper();

Résultat

Définir le ratio strict à : Ratio = 4/3 | Ratio = 16/9 | Ratio = 2/3

Définir le ratio non-strict à : Ratio = 4/3 | Ratio = 16/9 | Ratio = 2/3

Définitions spéciales du ratio à : Ratio = Picture | Ratio = Default | No Ratio

Exemple 2 : Couleur et opacité personnalisées, taille maxi/mini

HTML

  1. <img src="eiffeltower.jpg" id="bycropper_custom" />

Javascript

  1. myCropperCustom = new ByCropper('bycropper_custom', null, {
  2. minWidth: 190,
  3. maxWidth: 380,
  4. minHeight: 110,
  5. maxHeight: 220,
  6. maskColor: "#203060",
  7. maskOpacity: 0.96
  8. });

Résultat

À Venir ...

Un script Php de traitement de l'image sera ajouté prochainement...