如何利用PHP開發一個簡單的圖片裁切功能-php教程-PHP中文網

如何利用PHP開發一個簡單的圖片裁切功能

WBOY

發布： 2023-09-24 09:32:01

原創

1076 人瀏覽過

如何利用PHP開發一個簡單的圖片裁切功能

如何利用PHP開發一個簡單的圖片裁剪功能

導言:
在現代網路時代，圖片處理是一個非常重要的功能，使用者經常需要上傳或截取圖片以適應各種不同的平台和大小。本文將介紹如何利用PHP開發一個簡單的圖片裁剪功能，方便使用者對上傳的圖片進行裁剪。

一、準備工作

確保已經安裝了PHP環境，並且支援GD函式庫。終端機可以輸入 php -m | grep gd 檢查是否安裝，如果沒有則需要安裝。
建立一個名為crop.php的文件，用於處理圖片裁剪的邏輯。

二、實作邏輯

取得使用者上傳的圖片
我們首先需要一個HTML表單，用來取得使用者上傳的圖片。在crop.php中，可以加入以下程式碼：
```
<form method="POST" enctype="multipart/form-data">
 <input type="file" name="image" />
 <input type="submit" value="上传并裁剪图片" />
</form>
```
登入後複製

處理圖片
在crop.php中，加入以下程式碼來處理圖片：

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="如何利用PHP開發一個簡單的圖片裁切功能" >";
     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('文件上传失败');
 }
}

登入後複製

儲存裁剪後的圖片
繼續在crop.php中加入以下程式碼來儲存裁剪後的圖片：

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="如何利用PHP開發一個簡單的圖片裁切功能" >";
     }
 } else {
     die('图片保存失败');
 }
}

登入後複製

三、實作運行