Kemahiran pembangunan PHP: Bagaimana untuk melaksanakan fungsi pemangkasan imej-tutorial php-php.cn

Kemahiran pembangunan PHP: Bagaimana untuk melaksanakan fungsi pemangkasan imej

WBOY

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

asal

1471 orang telah melayarinya

Kemahiran pembangunan PHP: Bagaimana untuk melaksanakan fungsi pemangkasan imej

Dalam pembangunan laman web, kita sering menghadapi keperluan untuk memangkas imej, seperti memuat naik avatar, penjanaan lakaran kecil imej, dsb. Artikel ini akan memperkenalkan cara menggunakan PHP untuk melaksanakan fungsi pemangkasan imej dan menyediakan contoh kod khusus.

Persediaan

Sebelum kita mula, kita perlu pastikan perpustakaan GD telah dipasang pada pelayan. Pustaka GD ialah lanjutan daripada PHP yang menyediakan fungsi untuk mengendalikan imej. Jika ia tidak dipasang, anda boleh memasangnya menggunakan arahan berikut:

sudo apt-get install php7.2-gd

Salin selepas log masuk

Buat halaman pangkasan

Pertama, kita perlu mencipta halaman yang mengandungi borang muat naik dan pratonton tanaman. Berikut ialah contoh kod HTML yang mudah:

<!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="Kemahiran pembangunan PHP: Bagaimana untuk melaksanakan fungsi pemangkasan imej" >';
            }

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

Salin selepas log masuk

Halaman ini termasuk borang muat naik dan bekas untuk memaparkan pratonton tanaman. Melalui kod JavaScript, kami boleh memaparkan imej yang dimuat naik oleh pengguna dalam masa nyata.

Melaksanakan fungsi pemangkasan

Seterusnya, kita perlu mencipta fail PHP untuk menerima imej yang dimuat naik dan melaksanakan operasi pemangkasan. Berikut ialah contoh kod pemangkasan mudah:

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

Salin selepas log masuk

Dalam contoh ini, kita mula-mula mendapat imej yang dimuat naik dan parameter pemangkasan. Kemudian, cipta sumber imej baharu dan sumber imej yang dipangkas. Seterusnya, gunakan fungsi imagecopy()函数进行裁剪操作。最后，使用imagejpeg() untuk menyimpan imej yang dipangkas. Ambil perhatian bahawa laluan untuk menyimpan imej perlu diubah suai mengikut situasi sebenar. Fungsi pemangkasan boleh dikembangkan mengikut keperluan, seperti menambah putaran, penskalaan dan operasi lain.

Tingkatkan interaksi halaman

Akhir sekali, kami boleh menambah logik pemerolehan dan penyerahan parameter pemangkasan dalam kod JavaScript halaman yang dipangkas. Berikut ialah contoh kod demo lengkap:

<!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="Kemahiran pembangunan PHP: Bagaimana untuk melaksanakan fungsi pemangkasan imej" >';
            }

            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>

Salin selepas log masuk

Dalam contoh ini, kami menambah medan input tersembunyi pada borang pemangkasan untuk menyimpan parameter pemangkasan. Sebelum borang diserahkan, kedudukan dan saiz imej diperoleh melalui kod JavaScript, kemudian parameter pemangkasan diisi dalam medan tersembunyi, dan borang diserahkan.

Ringkasan

Melalui langkah di atas, kami telah berjaya melaksanakan fungsi pemangkasan imej menggunakan PHP. Dengan memuat naik borang dan kod JavaScript, kami boleh pratonton imej yang dimuat naik oleh pengguna dalam masa nyata, dan apabila borang pemangkasan diserahkan, parameter pemangkasan dihantar ke skrip PHP latar belakang untuk operasi pemangkasan. Sudah tentu, ini hanyalah contoh mudah Dalam aplikasi sebenar, sambungan fungsi yang lebih kompleks mungkin diperlukan berdasarkan keperluan khusus. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Kemahiran pembangunan PHP: Bagaimana untuk melaksanakan fungsi pemangkasan imej. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!