PHP開発スキル：画像トリミング機能の実装方法-PHPチュートリアル-php.cn

PHP開発スキル：画像トリミング機能の実装方法

WBOY

リリース： 2023-09-21 14:26:01

オリジナル

1472 人が閲覧しました

PHP開発スキル：画像トリミング機能の実装方法

PHP 開発のヒント: 画像トリミング機能の実装方法

Web サイト開発では、アバターのアップロードや画像の縮小など、画像をトリミングする必要がよく発生します。世代などこの記事では、PHP を使用して画像トリミング機能を実装する方法と具体的なコード例を紹介します。

準備

始める前に、GD ライブラリがサーバーにインストールされていることを確認する必要があります。 GDライブラリは、画像を操作する機能を提供するPHPの拡張機能です。インストールされていない場合は、次のコマンドを使用してインストールできます。

sudo apt-get install php7.2-gd

ログイン後にコピー

トリミングページの作成

まず、アップロードを含むページを作成する必要があります。フォームとトリミングのプレビュー。簡単な HTML コードの例を次に示します。

<!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開発スキル：画像トリミング機能の実装方法" >';
            }

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

ログイン後にコピー

このページには、アップロードフォームと、トリミングされたプレビューを表示するためのコンテナが含まれています。 JavaScript コードを通じて、ユーザーがアップロードした画像をリアルタイムで表示できます。

トリミング機能の実装

次に、アップロードされた画像を受け取り、トリミング操作を実行するための PHP ファイルを作成する必要があります。以下は、単純なトリミングコードの例です。

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

ログイン後にコピー

この例では、まず、アップロードされた画像とトリミングパラメーターを取得します。次に、新しい画像リソースとトリミングされた画像リソースを作成します。次に、imagecopy() 関数を使用してトリミング操作を実行します。最後に、imagejpeg() 関数を使用して、トリミングされた画像を保存します。画像を保存するパスは実際の状況に応じて変更する必要があることに注意してください。回転や拡大縮小などの操作を追加するなど、ニーズに応じてトリミング機能を拡張できます。

ページインタラクションの改善

最後に、トリミングページの JavaScript コードにトリミングパラメーターの取得および送信ロジックを追加できます。以下は完全なデモコード例です。

<!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開発スキル：画像トリミング機能の実装方法" >';
            }

            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>

ログイン後にコピー

この例では、トリミングパラメータを保存するために、トリミングフォームに非表示の入力フィールドを追加します。フォームが送信される前に、JavaScript コードを通じて画像の位置とサイズが取得され、トリミングパラメーターが非表示フィールドに入力されて、フォームが送信されます。

概要

上記の手順により、PHP を使用して画像のトリミング機能を実装することができました。フォームと JavaScript コードをアップロードすると、ユーザーがアップロードした画像をリアルタイムでプレビューでき、トリミングフォームが送信されると、トリミングパラメータがバックグラウンドの PHP スクリプトに渡されてトリミング操作が行われます。もちろん、これは単なる例であり、実際のアプリケーションでは、特定のニーズに基づいて、より複雑な機能拡張が必要になる場合があります。この記事がお役に立てば幸いです!

以上がPHP開発スキル：画像トリミング機能の実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。