How to use PHP to develop a simple image cropping function

How to use PHP to develop a simple image cropping function

Introduction:
In the modern Internet era, image processing is a very important function that users often need Upload or capture images to fit a variety of platforms and sizes. This article will introduce how to use PHP to develop a simple image cropping function to facilitate users to crop uploaded images.

1. Preparation

1. Make sure that the PHP environment has been installed and supports the GD library. You can enter php -m | grep gd in the terminal to check whether it is installed. If not, you need to install it.
2. Create a file named crop.php to handle the logic of image cropping.

2. Implementation logic

1. Get the pictures uploaded by the user
   We first need an HTML form to get the pictures uploaded by the user. In crop.php, you can add the following code:

   <form method="POST" enctype="multipart/form-data">
    <input type="file" name="image" />
    <input type="submit" value="上传并裁剪图片" />
   </form>

2. Processing images
   In crop.php, add the following code to process 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="/static/imghw/default1.png"  data-src="$uploadFile"  class="lazy" id="image"   style="max-width:90%" / alt="How to use PHP to develop a simple image cropping function" >";
        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('文件上传失败');
    }
   } 

3. Save the cropped image
   Continue to add the following code in crop.php to save the cropped image:

   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="/static/imghw/default1.png"  data-src="$croppedFile"  class="lazy"   style="max-width:90%" / alt="How to use PHP to develop a simple image cropping function" >";
        }
    } else {
        die('图片保存失败');
    }
   }

   3. Practice running

4. In Set up a PHP environment on the server and make sure the GD library is installed.
5. Upload the crop.php file to the server and ensure that the uploads folder has read and write permissions.
6. Access the crop.php file in your browser to upload and crop images.

Conclusion:
Through the above steps, we can use PHP to develop a simple image cropping function. After the user uploads the image, we can use the Cropper.js library to implement the image cropping function and save the cropped image. This simple image cropping function can be easily embedded into websites or web applications to improve user experience and meet various image processing needs.

The above is the detailed content of How to use PHP to develop a simple image cropping function. For more information, please follow other related articles on the PHP Chinese website!