Cropper.js : recadrer une image avant un upload en php

Recadrer ou redimensionner une image avant de l'uploader sur un serveur est devenue une tâche courante dans le développement web, pour créer un avatar d'utilisateur ou l'ajustement d'une mise en page. Grâce à des bibliothèques comme Cropper.js, cette opération est devenue simple et efficace. Cet article explique comment utiliser Cropper.js pour rogner une image côté client avant de l'envoyer au serveur via PHP.

Pourquoi utiliser Cropper.js ?

L'utilisation de Cropper.js présente de nombreux avantages. Elle permet aux utilisateurs d'interagir avec les images directement sur le navigateur. Ainsi, il est possible de recadrer une image selon leurs besoins spécifiques. Cette bibliothèque open-source se distingue par sa simplicité et ses fonctionnalités avancées.

De plus, elle offre une expérience utilisateur améliorée. L'utilisateur peut voir les modifications en temps réel avant de confirmer l'upload de l'image. Cela évite également la surcharge du serveur avec des opérations de recadrage qui pourraient être faites côté client.

Fonctionnalités principales de Cropper.js

Cropper.js propose plusieurs fonctionnalités intéressantes :

• Recadrage d'image interactif
• Redimensionnement dynamique
• Prise en charge des gestures sur mobile
• Rotation et mise à niveau des images
• Facilité d'intégration avec d'autres frameworks Javascript

Des démonstrations de cas d'usages et des exemples sont également disponible sur la page officielle de Cropper.js.

Ces fonctionnalités permettent aux développeurs de personnaliser l'expérience de recadrage en fonction des besoins de leur projet. L'interface utilisateur est intuitive, ce qui facilite son adoption par les utilisateurs finaux.

Par ailleurs, pour les projets nécessitant la maîtrise d'éléments interactifs enrichis telle que Swiper.js, l'intégration avec Cropper.js peut offrir des possibilités vraiment impressionnantes.

Comment intégrer Cropper.js dans votre projet ?

Intégrer Cropper.js dans un projet est relativement simple. Voici les étapes à suivre :

1. Inclure les fichiers nécessaires dans votre projet
2. Initialiser Cropper.js sur un élément HTML
3. Gérer le recadrage côté serveur avec PHP

Voyons chaque étape en détail afin de garantir une bonne compréhension et une intégration réussie.

Inclure les fichiers nécessaires

Tout d'abord, téléchargez et incluez les fichiers JavaScript et CSS de Cropper.js. Vous pouvez le faire en ajoutant les lignes suivantes dans votre fichier HTML :

<link  href="https://unpkg.com/cropperjs/dist/cropper.min.css" rel="stylesheet">
<script src="https://unpkg.com/cropperjs/dist/cropper.min.js"></script>

Cette inclusion vous donne accès aux fonctionnalités de Cropper.js dans votre projet. Maintenant, passez à l'initialisation de l'outil sur votre page Web. Par exemple, pour les photographes, la zone de découpe peut contenir le quadrillage suivant la règle des tiers permettant de déterminer un cadrage précis selon les lignes et points de forces contenues dans l'image.

Initialisation de Cropper.js

Ensuite, créez un élément HTML où l'image sera affichée et recadrée. Par exemple :

<img id="image">

Puis, initialisez Cropper.js sur cet élément en utilisant du JavaScript :

document.addEventListener('DOMContentLoaded', function () {
    var image = document.getElementById('image');
    var cropper = new Cropper(image, {
        aspectRatio : 16 / 9,
        viewMode : 1
    });
});

Ici, nous avons spécifié un rapport d'aspect de 16 :9 et le mode de vue 1, mais ces paramètres peuvent être personnalisés selon vos besoins.

Envoi de l'image recadrée avec PHP

Une fois l'image recadrée côté client, il faut l'envoyer au serveur pour le traitement ultérieur. Utiliser JavaScript pour extraire les données du canvas de l'image recadrée et ensuite les envoyer via une requête AJAX est une approche efficace.

Extraire les données du canvas

Après avoir recadré l'image, on peut obtenir les données correspondantes au format base64 en utilisant la méthode getCroppedCanvas() de Cropper.js. Voici un exemple :

document.getElementById('cropButton').addEventListener('click', function(){
    var croppedCanvas = cropper.getCroppedCanvas();
    var croppedImage = croppedCanvas.toDataURL('image/png');

    // Envoie l'image au serveur
    sendCroppedImage(croppedImage);
});

Maintenant que l'on a les données de l'image recadrée, restons concentrés sur l'envoi de ces données au serveur à l'aide de PHP.

Envoyer l'image recadrée au serveur

Pour envoyer l'image recadrée au serveur, utilisons AJAX. Nous créons une fonction sendCroppedImage qui fait le travail :

function sendCroppedImage(base64Image) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'upload.php', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log('Image uploaded successfully  !');
        }
    };
    xhr.send('croppedImage=' + encodeURIComponent(base64Image));
}

Ajoutons maintenant un script PHP qui reçoit et traite cette image recadrée.

Traitement de l'image recadrée avec PHP

Côté serveur, dans upload.php, il faut décoder l'image encodée en base64 et la sauvegarder. Voici un exemple de code PHP pour traiter l'image :

<?php
if (isset($_POST['croppedImage'])) {
    $data = $_POST['croppedImage'];
    list($type, $data) = explode(';', $data);
    list(, $data)      = explode(',', $data);
    $data = base64_decode($data);

    $imageName = 'cropped_image.png';
    file_put_contents('uploads/' . $imageName, $data);

    echo 'Image upload successful  !';
}
?>

Ce script prend l'image encodée reçue depuis le client, la décode, puis la sauvegarde sur le serveur dans le dossier "uploads". Veillez à vérifier si ce dossier existe et dispose des permissions nécessaires pour écrire des fichiers.

Si vous souhaitez aller plus loin dans l’optimisation des images envoyées, pensez à utiliser la fonction PHP imagewebp. Cette méthode permet de convertir les images en format WebP, offrant ainsi une compression plus efficace.

Avec Cropper.js, recadrer une image côté client devient facile et élégant. Les utilisateurs peuvent ajuster leurs photos avant même de les uploader, offrant ainsi une meilleure expérience utilisateur. Ce guide montre comment intégrer cette bibliothèque avec PHP pour parvenir à gérer efficacement le recadrage et l'upload d'images. En suivant ces étapes, vous pourrez améliorer considérablement la manière dont les images sont manipulées dans vos projets web.