PHP - Comment recadrer une image avant de la télécharger à l'aide de Cropper Js ? - Letecode
Suivez nous
@johnmbiya - 281 dans Web

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.

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

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

@johnmbiya
Jean Claude Mbiya (johnmbiya)

je suis developper fullstack, Dévelopeur android (AAD), créateur de letecode.com, bloggeur, formateur, fondateur de Guide Light System, j'aime la science informatique 😎👨‍💻

P : 386 7 7 24
Abonnez vous !

Recevez les dernières nouvelles de letecode directement dans votre boîte de réception. Réjoignez +500 Abonnés, Nous n'envoyons pas des spam !

Voir plus

Tutoriel Laravel 8 : Générer et Lire un fichier Sitemap XML

Tutoriel Sitemap XML dynamique avec Laravel 8; Tout au long de ce guide, nous parlerons de la création d'un fichier sitemap.xml dynamique dans l'application laravel. De plus, nous allons également décrire comment lire le fichier xml du sitemap dans l'application laravel.

johnmbiya Laravel