Maison > développement back-end > tutoriel php > Comment utiliser PHP pour développer une fonction simple de recadrage d'image

Comment utiliser PHP pour développer une fonction simple de recadrage d'image

WBOY
Libérer: 2023-09-24 09:32:01
original
1098 Les gens l'ont consulté

Comment utiliser PHP pour développer une fonction simple de recadrage dimage

Comment utiliser PHP pour développer une fonction simple de recadrage d'image

Introduction :
À l'ère d'Internet moderne, le traitement d'image est une fonction très importante. Les utilisateurs doivent souvent télécharger ou capturer des images pour s'adapter à différentes plates-formes et tailles. Cet article expliquera comment utiliser PHP pour développer une fonction simple de recadrage d'image afin de permettre aux utilisateurs de recadrer les images téléchargées.

1. Préparation

  1. Assurez-vous que l'environnement PHP a été installé et prend en charge la bibliothèque GD. Vous pouvez saisir php -m | grep gd dans le terminal pour vérifier s'il est installé. Sinon, vous devez l'installer.
  2. Créez un fichier nommé crop.php pour gérer la logique du recadrage de l'image.

2. Implémenter la logique

  1. Récupérer les images téléchargées par l'utilisateur
    Nous avons d'abord besoin d'un formulaire HTML pour obtenir les images téléchargées par l'utilisateur. Dans crop.php, vous pouvez ajouter le code suivant :

    <form method="POST" enctype="multipart/form-data">
     <input type="file" name="image" />
     <input type="submit" value="上传并裁剪图片" />
    </form>
    Copier après la connexion
  2. Traitement des images
    Dans crop.php, ajoutez le code suivant pour traiter les images :

    if ($_SERVER['REQUEST_METHOD'] === 'POST') {
     $file = $_FILES['image'];
     $fileType = $file['type'];
     $ allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
    
     if (!in_array($fileType, $allowedTypes)) {
         die('只允许上传 JPG、PNG 或 GIF 格式的图片文件');
     }
    
     $uploadDir = 'uploads/';
     $uploadFile = $uploadDir . basename($file['name']);
    
     if (move_uploaded_file($file['tmp_name'], $uploadFile)) {
         // 获取上传后的图片宽度和高度
         list($width, $height) = getimagesize($uploadFile);
         // 输出裁剪工具的HTML代码
         echo "<img  src="$uploadFile" id="image"   style="max-width:90%" / alt="Comment utiliser PHP pour développer une fonction simple de recadrage d'image" >";
         echo "<script src="https://cdn.jsdelivr.net/npm/cropperjs"></script>";
         echo '<script>
             var image = document.getElementById("image");
             var cropper = new Cropper(image, {
                 aspectRatio: 1, // 裁剪框的宽高比例
                 viewMode: 1 // 显示裁剪範圍的模式,1代表裁剪範圍不能超过预览图的大小
             });
         </script>';
         echo '<button onclick="crop()">裁剪并保存</button>';
    
         // 定义裁剪成功后保存的文件路径
         $croppedFile = $uploadDir . 'cropped_' . basename($file['name']);
    
         echo '<script>
             function crop() {
                 var canvas = cropper.getCroppedCanvas(); // 获取裁剪后的图像
                 canvas.toBlob(function(blob) { // 将裁剪后的图像转为 Blob 对象
                     var formData = new FormData();
                     formData.append("file", blob, "cropped_' . basename($file['name']) . '"); // 将裁剪后的图像添加到 FormData 对象中
                     // 发送请求保存裁剪后的图像
                     var xhr = new XMLHttpRequest();
                     xhr.open("POST", "crop.php", true);
                     xhr.onload = function() {
                         if (xhr.status === 200) {
                             alert("图片裁剪并保存成功!");
                         } else {
                             alert("图片裁剪失败!");
                         }
                     };
                     xhr.send(formData);
                 }, "' . $fileType . '");
             }
         </script>';
     } else {
         die('文件上传失败');
     }
    } 
    Copier après la connexion
  3. Enregistrez l'image recadrée
    Continuez à ajouter dans crop.php Le le code suivant est utilisé pour enregistrer l'image recadrée :

    if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['file'])) {
     $file = $_FILES['file'];
     $uploadDir = 'uploads/';
     $uploadFile = $uploadDir . basename($file['name']);
     
     if (move_uploaded_file($file['tmp_name'], $uploadFile)) {
         // 保存裁剪后的图片
         $croppedFile = $uploadDir . 'cropped_' . basename($file['name']);
         if (rename($uploadFile, $croppedFile)) {
             // 输出裁剪后的图片
             echo "<img  src="$croppedFile"   style="max-width:90%" / alt="Comment utiliser PHP pour développer une fonction simple de recadrage d'image" >";
         }
     } else {
         die('图片保存失败');
     }
    }
    Copier après la connexion

    3. Entraînez-vous à exécuter

  4. Configurez un environnement PHP sur le serveur et assurez-vous que la bibliothèque GD est installée.
  5. Téléchargez le fichier crop.php sur le serveur et assurez-vous que le dossier de téléchargement dispose des autorisations de lecture et d'écriture.
  6. Accédez au fichier crop.php dans votre navigateur pour télécharger et recadrer les images.

Conclusion :
Grâce aux étapes ci-dessus, nous pouvons utiliser PHP pour développer une fonction simple de recadrage d'image. Lorsque l'utilisateur télécharge l'image, nous pouvons utiliser la bibliothèque Cropper.js pour implémenter la fonction de recadrage d'image et enregistrer l'image recadrée. Cette fonction simple de recadrage d'image peut être facilement intégrée à des sites Web ou à des applications Web pour améliorer l'expérience utilisateur et répondre à divers besoins de traitement d'image.

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal