Docs Éditeur d'image Github Contact
Docs Éditeur d'image Github Contact

Fonctionnalités

Fichiers principaux

Commencer

Options

Images supportées

Navigateurs supportés

Fonctionnalités

Cropxtender permet d'effectuer diverses opérations sur une image, telles que :

● Recadrage

● Rotation

● Retournement

● Zoom

● Filtres et effets photo

● Génération d'image avec l'IA (WIP)

Fichiers principaux

src/
└── cropxtender.js
examples/
├── example-basic/
    ├── cropxtender.js
    ├── image.jpg
    ├── index.html
    ├── style.css
    └── img/
└── example-editor/
    ├── cropxtender.js
    ├── image.jpg
    ├── index.html
    ├── style.css
    ├── tailwind.js
    └── img/

Commencer

Installation

$ 
npm install cropxtender

Dans le navigateur:

<script src="/path/to/cropxtender.js"></script>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

Utilisation

Syntaxe

$("input").cropxtender({options})

  • ● input

    L'input cible permettant de choisir une image à traiter.

  • ● options

    Les options de modification.

Exemple

<input type="file" name="image" id="cropxtender-input">
 <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> 
<script src="/path/to/cropxtender.js"></script>  
<script> 
$("document").ready(function(){ 
    $("#cropxtender-input").cropxtender({ 
        saveButtonText: "Oui",
        closeButtonText: "Non",
        saveButtonStyle: {
            "width": "20px",
            "padding": "2rem",
        },
        closeButtonStyle: {
            "width": "20px",
            "padding": "2rem",
        }
    });
});

Options

Vous pouvez définir les options de modification avec $("input").cropxtender([options]).

saveFunction

Fonction de sauvegarde personnalisée.

  • ● Type : Function
  • ● Défaut : remplace l'image de l'input par l'image traitée
  • ● Exemple : saveFunction: function (image) { console.log(image); }

closeFunction

Fonction de fermeture personnalisée.

  • ● Type : Function
  • ● Défaut : supprime l'élément cropxtender
  • ● Exemple : closeFunction: function () { console.log("Hello World !"); }

saveButtonText

Définir le texte du bouton de sauvegarde (HTML accepté).

  • ● Type : String
  • ● Défaut : "Valider"

closeButtonText

Définir le texte du bouton de fermeture (HTML accepté).

  • ● Type : String
  • ● Défaut : "Annuler"

saveButtonStyle

Définir le style CSS du bouton de sauvegarde.

  • ● Type : Object
  • ● Défaut : null

closeButtonStyle

Définir le style CSS du bouton de fermeture.

  • ● Type : Object
  • ● Défaut : null

modalStyle

Définir le style CSS pour la modal.

  • ● Type : Object
  • ● Défaut : null
  • ● Type : Boolean
  • ● Défaut : true

cropping

Activer le redimensionnement de l'image. Avec le curseur, saisissez la bordure droite ou inférieure et faites-la glisser jusqu'à la largeur ou la hauteur souhaitée.

  • ● Type : Boolean
  • ● Défaut : true

croppingAspectRatio

Conserver le rapport hauteur/largeur existant ou en définir un nouveau pour limiter les proportions lors du redimensionnement (par exemple {x: 0.6, y: 1}).

  • ● Type : Object
  • ● Défaut : null
  • ● Options :

    • x : axe horizontale

    • y : axe verticale

croppingButtonText

Définir le texte du bouton de recadrage (HTML accepté).

  • ● Type : String
  • ● Défaut : "Crop"

rotating

Activer la rotation de l'image.

  • ● Type : Boolean
  • ● Défaut : false

rotatingButtonText

Définir le texte du bouton de rotation (HTML accepté).

  • ● Type : String
  • ● Défaut : "Rotate"

flippingX

Acitver le retournement de l'image sur l'axe horizontal.

  • ● Type : Boolean
  • ● Défaut : false

flippingXButtonText

Définir le texte du bouton de retournement sur l'axe horizontal (HTML accepté).

  • ● Type : String
  • ● Défaut : "Flip X"

flippingY

Acitver le retournement de l'image sur l'axe vertical.

  • ● Type : Boolean
  • ● Défaut : false

flippingYButtonText

Définir le texte du bouton de retournement sur l'axe vertical (HTML accepté).

  • ● Type : String
  • ● Défaut : "Flip Y"

zooming

Activer le zoom/dézoom sur l'image.

  • ● Type : Boolean
  • ● Défaut : false

zoomingButtonText

Définir le texte du bouton du zoom (HTML accepté).

  • ● Type : String
  • ● Défaut : "Zoom"

defaultZoom

Mettre une valeur de zoom/dézoom par défaut (min: 1, max: 200).

  • ● Type : Int
  • ● Défaut : null

filtering

Activer les filtres sur l'image.

  • ● Type : Boolean
  • ● Défaut : false

filteringButtonText

Définir le texte du bouton des filtres (HTML accepté).

  • ● Type : String
  • ● Défaut : "Filtres"

defaultFilter

Mettre une valeur de filtres sur l'image par défaut.

  • ● Type : Object
  • ● Défaut : null
  • ● Exemple :

iaGenerating

Activer le Generated Fill sur l'image (WIP).

iaGeneratingButtonText

Définir le texte du bouton de Generated Fill (HTML accepté).

  • ● Type : String
  • ● Défaut : "Generated Fill"

optionButtonStyle

Définir le style CSS pour les boutons d'options.

  • ● Type : Objet
  • ● Défaut : null

optionButtonContainerStyle

Définir le style CSS pour le conteneur des boutons d'options.

  • ● Type : Objet
  • ● Défaut : null

optionSliderStyle

Définir le style CSS pour les sliders des options zooming et filtering.

  • ● Type : String (CSS)
  • ● Défaut : null

jqueryUiImport

Importation de jQuery UI.

  • ● Type : Boolean
  • ● Défaut : true

cssImport

Importation du CSS de jQuery UI.

  • ● Type : Boolean
  • ● Défaut : true

forceDisableCSS

Forcer la désactivation du CSS d'origine.

  • ● Type : Boolean
  • ● Défaut : false

Images supportées

● PNG

● JPG/JPEG

● WEBP

● GIF

● BMP

'Navigateurs supportés

● Chrome (dernier)

● Firefox (dernier)

● Safari (dernier)

● Opéra (dernier)

● Bord (dernier)

● Internet Explorer 9+