PHP development skills: How to implement image cropping function-PHP Tutorial-php.cn

PHP development skills: How to implement image cropping function

WBOY

Release： 2023-09-21 14:26:01

Original

1470 people have browsed it

PHP development skills: How to implement image cropping function

PHP Development Tips: How to Implement Image Cropping Function

In website development, we often encounter the need to crop images, such as avatar uploading and image shrinking. Thumbnail generation, etc. This article will introduce how to use PHP to implement image cropping function and provide specific code examples.

Preparation

Before we begin, we need to ensure that the GD library has been installed on the server. The GD library is an extension of PHP that provides functions for operating images. If it is not installed, you can use the following command to install it:

sudo apt-get install php7.2-gd

Copy after login

Create a cropping page

First, we need to create a page containing the upload form and cropping preview. Here is a simple HTML code example:

<!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="PHP development skills: How to implement image cropping function" >';
            }

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

Copy after login

The page includes an upload form and a container for displaying a cropped preview. Through JavaScript code, we can display images uploaded by users in real time.

Implementing the cropping function

Next, we need to create a PHP file to receive the uploaded image and perform the cropping operation. The following is a simple cropping code example:

<?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 '图片裁剪成功';
?>

Copy after login

In this example, we first obtain the uploaded image and cropping parameters. Then, create a new image resource and a cropped image resource. Next, use the imagecopy() function to perform the cropping operation. Finally, use the imagejpeg() function to save the cropped image. Note that the path to save the image needs to be modified according to the actual situation. The cropping function can be expanded according to needs, such as adding rotation, scaling and other operations.

Improve page interaction

Finally, we can add the acquisition and submission logic of cropping parameters in the JavaScript code of the cropping page. The following is a complete demo code example:

<!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="PHP development skills: How to implement image cropping function" >';
            }

            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>

Copy after login

In this example, we add a hidden input field to the cropping form to store cropping parameters. Before the form is submitted, the position and size of the image are obtained through JavaScript code, then the cropping parameters are filled in the hidden fields, and the form is submitted.

Summary

Through the above steps, we have successfully implemented the function of image cropping using PHP. By uploading the form and JavaScript code, we can preview the image uploaded by the user in real time, and when the cropping form is submitted, the cropping parameters are passed to the background PHP script for cropping operation. Of course, this is just a simple example. In actual applications, more complex functional extensions may be required based on specific needs. Hope this article is helpful to you!

The above is the detailed content of PHP development skills: How to implement image cropping function. For more information, please follow other related articles on the PHP Chinese website!