PHP - Comment recadrer une image avant de la télécharger à l'aide de Cropper Js ?

Parfois vous avez besoin que les images de profil de vos utilisateurs soient carrées et que les utilisateurs recadre leurs profil, voici une astuce.

Jean Claude Mise à jour : 19 décembre 2022 1182

Dans ce tutoriel, vous apprendrez l'exemple de PHP avec cropper.js. cet exemple vous aidera à recadrer l'image de profil de vos utiliseurs avant le téléchargement.

Cropper.js est un plugin JavaScript/jQuery facile à utiliser pour le recadrage d'images avec prise en charge des aperçus en direct et des proportions personnalisées.

Je vais utiliser le modèle view dans l'exemple. affichage du modèle pour télécharger l'image et recadrer avec l'aperçu de l'image.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>PHP recadrer l'image avant telechargement</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha256-WqU1JavFxSAMcLP2WIOI+GB2zWmShMI82mTpLDcqFUg=" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.css" integrity="sha256-jKV9n9bkk/CTP8zbtEtnKaKf+ehRovOYeKoyfthwbC8=" crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.js" integrity="sha256-CgvH7sz3tHhkiVKh05kSUgG97YtzYNnWt6OXcmYzqHY=" crossorigin="anonymous"></script>
</head>
<style type="text/css">
    img {
        display: block;
        max-width: 100%;
    }

    .preview {
        overflow: hidden;
        width: 160px;
        height: 160px;
        margin: 10px;
        border: 1px solid red;
    }

    .modal-lg {
        max-width: 1000px !important;
    }
</style>

<body>
    <div class="container">
        <h1>PHP recadrer l'image avant telechargement - Letecode</h1>
        <form method="post">
            <div class="form-group">
                <input type="file" class="form-control image" name="image" >
            </div>
        </form>
    </div>

    <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalLabel">Recadrer l'image</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="img-container">
                        <div class="row">
                            <div class="col-md-8">
                                <img id="image" src="https://avatars0.githubusercontent.com/u/3456749">
                            </div>
                            <div class="col-md-4">
                                <div class="preview"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                    <button type="button" class="btn btn-primary" id="crop">Recadrer</button>
                </div>
            </div>
        </div>
    </div>

    </div>
    </div>
    <script>
        var $modal = $('#modal');
        var image = document.getElementById('image');
        var cropper;

        $("body").on("change", ".image", function(e) {
            var files = e.target.files;
            var done = function(url) {
                image.src = url;
                $modal.modal('show');
            };
            var reader;
            var file;
            var url;

            if (files && files.length > 0) {
                file = files[0];

                if (URL) {
                    done(URL.createObjectURL(file));
                } else if (FileReader) {
                    reader = new FileReader();
                    reader.onload = function(e) {
                        done(reader.result);
                    };
                    reader.readAsDataURL(file);
                }
            }
        });

        $modal.on('shown.bs.modal', function() {
            cropper = new Cropper(image, {
                aspectRatio: 1,
                viewMode: 3,
                preview: '.preview'
            });
        }).on('hidden.bs.modal', function() {
            cropper.destroy();
            cropper = null;
        });

        $("#crop").click(function() {
            canvas = cropper.getCroppedCanvas({
                width: 160,
                height: 160,
            });

            canvas.toBlob(function(blob) {
                url = URL.createObjectURL(blob);
                var reader = new FileReader();
                reader.readAsDataURL(blob);
                reader.onloadend = function() {
                    var base64data = reader.result;

                    $.ajax({
                        type: "POST",
                        dataType: "json",
                        url: "upload.php",
                        data: {
                            image: base64data
                        },
                        success: function(data) {
                            console.log(data);
                            $modal.modal('hide');
                            alert("Image téléchargée avec success");
                        }
                    });
                }
            });
        })
    </script>
</body>
</html>

Avec PHP nous recevons le fichier et enregistrons dans un dossier sur le serveur.

traitement.php

<?php
    $folderPath = 'upload/';
    $image_parts = explode(";base64,", $_POST['image']);
    $image_type_aux = explode("image/", $image_parts[0]);
    $image_type = $image_type_aux[1];
    $image_base64 = base64_decode($image_parts[1]);
    $file = $folderPath . uniqid() . '.png';
    file_put_contents($file, $image_base64);
    echo json_encode(["Image téléchargée avec success"]);

Pour en savoir plus, consulter la documentation officielle de Cropper.js

Laisser un commentaire

Jean Claude Mbiya

Développeur Web full stack, Développeur Android (Certifié Google AAD) Formateur dans les domaines du numérique, Créateur letecode.com 👨‍💻. Je suis un grand passionné des nouvelles technologies et j'adore partager ce que j'apprend.