Maison >développement back-end >tutoriel php >Compétences en développement PHP : comment implémenter la fonction de recadrage d'image

Compétences en développement PHP : comment implémenter la fonction de recadrage d'image

WBOYoriginal: 2023-09-21 14:24:201518parcourir

Compétences en développement PHP : comment implémenter la fonction de recadrage dimage

Compétences en développement PHP : Comment implémenter la fonction de recadrage d'image

Dans le développement de sites Web, nous rencontrons souvent le besoin de recadrer des images, comme le téléchargement d'avatars, la génération de vignettes d'images, etc. Cet article expliquera comment utiliser PHP pour implémenter la fonction de recadrage d'image et fournira des exemples de code spécifiques.

Préparation

Avant de commencer, nous devons nous assurer que la bibliothèque GD est installée sur le serveur. La bibliothèque GD est une extension de PHP qui fournit des fonctions d'exploitation des images. S'il n'est pas installé, vous pouvez l'installer à l'aide de la commande suivante :

sudo apt-get install php7.2-gd

Créer une page de recadrage

Tout d'abord, nous devons créer une page contenant le formulaire de téléchargement et l'aperçu du recadrage. Voici un exemple de code HTML simple :

<!DOCTYPE html>
<html>
<head>
    <title>图片裁剪</title>
    <style>
        #uploadForm {
            margin: 20px;
        }

        #imagePreview {
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <form id="uploadForm" action="crop.php" method="post" enctype="multipart/form-data">
        <input type="file" name="file" accept="image/*" required>
        <input type="submit" value="上传">
    </form>

    <div id="imagePreview"></div>

    <script>
        var uploadForm = document.getElementById('uploadForm');
        var imagePreview = document.getElementById('imagePreview');
        
        uploadForm.addEventListener('change', function() {
            var file = this['file'].files[0];
            var reader = new FileReader();

            reader.onload = function(e) {
                imagePreview.innerHTML = '<img  src="' + e.target.result + '" alt="Compétences en développement PHP : comment implémenter la fonction de recadrage d'image" >';
            }

            reader.readAsDataURL(file);
        });
    </script>
</body>
</html>

La page comprend un formulaire de téléchargement et un conteneur pour afficher un aperçu recadré. Grâce au code JavaScript, nous pouvons afficher les images téléchargées par les utilisateurs en temps réel.

Implémentation de la fonction de recadrage

Ensuite, nous devons créer un fichier PHP pour recevoir l'image téléchargée et effectuer l'opération de recadrage. Voici un exemple simple de code de recadrage :

<?php
    // 获取上传的图片
    $file = $_FILES['file'];

    // 获取裁剪参数
    $x = $_POST['x'];
    $y = $_POST['y'];
    $width = $_POST['width'];
    $height = $_POST['height'];

    // 创建一个新的图片资源
    $image = imagecreatefromjpeg($file['tmp_name']);

    // 创建裁剪后的图片资源
    $croppedImage = imagecreatetruecolor($width, $height);

    // 进行裁剪操作
    imagecopy($croppedImage, $image, 0, 0, $x, $y, $width, $height);

    // 保存裁剪后的图片
    imagejpeg($croppedImage, 'cropped.jpg');

    // 释放图片资源
    imagedestroy($image);
    imagedestroy($croppedImage);
    
    echo '图片裁剪成功';
?>

Dans cet exemple, nous obtenons d'abord l'image téléchargée et les paramètres de recadrage. Ensuite, créez une nouvelle ressource d’image et une ressource d’image recadrée. Ensuite, utilisez la fonction imagecopy()函数进行裁剪操作。最后，使用imagejpeg() pour enregistrer l'image recadrée. Notez que le chemin pour enregistrer l'image doit être modifié en fonction de la situation réelle. La fonction de recadrage peut être étendue en fonction des besoins, comme l'ajout de rotation, de mise à l'échelle et d'autres opérations.

Améliorer l'interaction de la page

Enfin, nous pouvons ajouter la logique d'acquisition et de soumission des paramètres de recadrage dans le code JavaScript de la page de recadrage. Voici un exemple de code de démonstration complet :

<!DOCTYPE html>
<html>
<head>
    <title>图片裁剪</title>
    <style>
        #uploadForm {
            margin: 20px;
        }

        #imagePreview {
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
            margin-top: 20px;
        }

        #cropForm {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <form id="uploadForm" action="crop.php" method="post" enctype="multipart/form-data">
        <input type="file" name="file" accept="image/*" required>
        <input type="submit" value="上传">
    </form>

    <div id="imagePreview"></div>

    <form id="cropForm" action="crop.php" method="post">
        <input type="hidden" name="x">
        <input type="hidden" name="y">
        <input type="hidden" name="width">
        <input type="hidden" name="height">
        <input type="submit" value="裁剪">
    </form>

    <script>
        var uploadForm = document.getElementById('uploadForm');
        var imagePreview = document.getElementById('imagePreview');
        var cropForm = document.getElementById('cropForm');

        uploadForm.addEventListener('change', function() {
            var file = this['file'].files[0];
            var reader = new FileReader();

            reader.onload = function(e) {
                imagePreview.innerHTML = '<img  src="' + e.target.result + '" alt="Compétences en développement PHP : comment implémenter la fonction de recadrage d'image" >';
            }

            reader.readAsDataURL(file);
        });

        cropForm.addEventListener('submit', function(e) {
            e.preventDefault();

            var image = imagePreview.querySelector('img');
            var rect = image.getBoundingClientRect();

            var x = rect.left - imagePreview.offsetLeft;
            var y = rect.top - imagePreview.offsetTop;
            var width = rect.width;
            var height = rect.height;

            cropForm.querySelector('[name="x"]').value = x;
            cropForm.querySelector('[name="y"]').value = y;
            cropForm.querySelector('[name="width"]').value = width;
            cropForm.querySelector('[name="height"]').value = height;

            cropForm.submit();
        });
    </script>
</body>
</html>

Dans cet exemple, nous ajoutons un champ de saisie masqué au formulaire de recadrage pour stocker les paramètres de recadrage. Avant que le formulaire ne soit soumis, la position et la taille de l'image sont obtenues via le code JavaScript, puis les paramètres de recadrage sont renseignés dans les champs masqués et le formulaire est soumis.

Résumé

Grâce aux étapes ci-dessus, nous avons implémenté avec succès la fonction de recadrage d'image à l'aide de PHP. En téléchargeant le formulaire et le code JavaScript, nous pouvons prévisualiser l'image téléchargée par l'utilisateur en temps réel, et lorsque le formulaire de recadrage est soumis, les paramètres de recadrage sont transmis au script PHP d'arrière-plan pour l'opération de recadrage. Bien entendu, il ne s’agit que d’un exemple simple. Dans les applications réelles, des extensions fonctionnelles plus complexes peuvent être nécessaires en fonction de besoins spécifiques. J'espère que cet article vous aidera !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php JavaScript html GD库

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Développement PHP : Comment implémenter les fonctions de likes et de commentaires d'articlesArticle suivant：Développement PHP : Comment implémenter les fonctions de likes et de commentaires d'articles

Articles Liés

Voir plus