Redimensionnez vos images avec la bibliothèque JQuery JavaScript Cropper.js

Découvrez Cropper.js une bibliothèque JavaScript open-source qui permet de recadrer et de rogner des images côté client. Elle fournit une interface utilisateur conviviale pour sélectionner une région spécifique d’une image, puis permet de la recadrer ou de la rogner selon les besoins.

Avant de démarrer voici quelques manipulations à réaliser afin d’installer JQuery et récupérer Cropper.js

Ajouter jQuery : En incluant les fichiers : ici ou via CDN (recommandé).

Ajouter Cropper.js : Télécharger le fichier ici et l’ajouter dans le votre arborescence. Ou via CDN ici.

Inclure les fichiers :

<script src="/chemin/vers/jquery.js"></script><!-- jQuery requis -->
<script src="/chemin/vers/cropper.js"></script><!-- Cropper.js requis -->
<link  href="/chemin/vers/cropper.css" rel="stylesheet">
<script src="/chemin/vers/jquery-cropper.js"></script>

Initialisation de Cropper.js

<!-- Encapsuler l'image dans une div (container) -->
<div>
    <img id="image" src="source_de_mon_image.jpg" alt="Image">
</div>

On limite la largeur de l’image à 100% pour éviter qu’elle dépasse de son conteneur.

img {
    max-width: 100%;
}

// Récupérer l'élément image
let $image = $('#image');

// Initialisation de cropper.js
$image.cropper({
    aspectRatio: 16 / 9,
    crop: function(event) {
        console.log(event.detail.x);
        console.log(event.detail.y);
        console.log(event.detail.width);
        console.log(event.detail.height);
        console.log(event.detail.rotate);
        console.log(event.detail.scaleX);
        console.log(event.detail.scaleY);
    }
});

// Récupérer l'instance de cropper.js après l'initialisation
let cropper = $image.data('cropper');

Arrivé à cette étape, vous obtenez une selection d’image avec les options, événements et méthodes par défaut.

Options

Sont définies dans l’objet options lors de l’initialisation de cropper.js

new Cropper(image, options);

Exemple :

ViewMode : Défini le mode de vue de l’image. Par défaut, il est défini à 0.
La sélection de l’image se fait sans restriction.

viewMode: 0, // 0, 1, 2, 3

Méthodes

Sont définies dans l’objet cropper lors de l’initialisation de cropper.js

$image.cropper('reset');
$image.cropper('rotate', 90);
$image.cropper('zoom', 0.1);
$image.cropper('zoom', -0.1);
$image.cropper('move', 0, -10);

On peut les appeler lors d’un clic sur un bouton ajouté à coté de la séléction.

Evénements

Les évenements peuvent être appelés à différents moments,
ready : lorsque l’image est chargée et que le cropper est prêt à être utilisé.
cropstart : lorsque le cropper commence à être déplacé.
cropmove : lorsque le cropper est déplacé.
cropend : lorsque le cropper est déplacé …

let cropper;
image.addEventListener('ready', () => {
    console.log(this.cropper === cropper);
        // true
});
cropper = new Cropper(image);

Exemples

Pour illustrer davantage l’utilisation de Cropper.js, voici quelques exemples concrets :

1. Profil utilisateur : Utilisez Cropper.js pour permettre aux utilisateurs de recadrer leurs photos de profil sur un site web.
2. Galerie d’images : Créer une galerie d’images avec Cropper.js, où les utilisateurs peuvent recadrer et rogner les images avant de les télécharger.
3. Outil d’édition d’images : Intégrer Cropper.js à un outil d’édition d’images plus avancé, offrant des fonctionnalités de recadrage et de modification d’images supplémentaires.

<!-- 1. Profil Utilisateur -->
<!-- HTML -->
<div>
  <img id="profile-image" src="path/to/image.jpg" alt="Profile Image">
</div>


// JS
// Initialisation de Cropper.js
var image = document.getElementById('profile-image');
var cropper = new Cropper(image, {
  aspectRatio: 1,
  viewMode: 3,
  crop: function(event) {
    // Récupérer les coordonnées et dimensions de la région recadrée
    var croppedData = cropper.getData();
    console.log(croppedData);
  }
});


<!-- 2. Galerie d'images -->
<!-- HTML -->
<div class="image-gallery">
  <img class="gallery-image" src="path/to/image1.jpg" alt="Image 1">
  <img class="gallery-image" src="path/to/image2.jpg" alt="Image 2">
  <!-- Ajoutez d'autres images ici -->
</div>

// JS
// Initialisation de Cropper.js pour chaque image de la galerie
var galleryImages = document.getElementsByClassName('gallery-image');
Array.from(galleryImages).forEach(function(image) {
  var cropper = new Cropper(image, {
    aspectRatio: NaN, // Permet un ratio d'aspect libre
    crop: function(event) {
      // Récupérer les coordonnées et dimensions de la région recadrée
      var croppedData = cropper.getData();
      console.log(croppedData);
    }
  });
});


<!-- 3. Outil d'édition d'image -->
<!-- HTML -->
<div>
  <img id="editable-image" src="path/to/image.jpg" alt="Editable Image">
  <button id="crop-button">Recadrer</button>
</div>

// JS 
// Initialisation de Cropper.js
var image = document.getElementById('editable-image');
var cropper = new Cropper(image, {
  aspectRatio: NaN, // Permet un ratio d'aspect libre
  crop: function(event) {
    // Récupérer les coordonnées et dimensions de la région recadrée
    var croppedData = cropper.getData();
    console.log(croppedData);
  }
});

// Événement au clic sur le bouton de recadrage
var cropButton = document.getElementById('crop-button');
cropButton.addEventListener('click', function() {
  // Récupérer l'image recadrée au format base64
  var croppedImage = cropper.getCroppedCanvas().toDataURL('image/jpeg');
  // Faire quelque chose avec l'image recadrée, par exemple l'envoyer au serveur
  console.log(croppedImage);
});

Nous avons exploré la mise en place de Cropper.js, une bibliothèque JavaScript pratique pour le recadrage d’images côté client. Que vous soyez débutant ou expert en développement web, vous avez maintenant les connaissances nécessaires pour installer Cropper.js, comprendre son fonctionnement et l’utiliser dans vos propres projets. En utilisant les exemples présentés, vous pouvez donner à vos utilisateurs la possibilité de recadrer et de rogner des images de manière intuitive et efficace.

Liens

Projet Cropper.js : https://fengyuanchen.github.io/cropperjs/v2/

Playgrounds :

v1 : https://fengyuanchen.github.io/jquery-cropper/

v2 : https://fengyuanchen.github.io/cropperjs/v2/playground.html