ホームページ > 記事 > バックエンド開発 > PHP はカメラを呼び出して写真を撮り、リアルタイムフィルターを追加します: クイックスタートガイド

PHP はカメラを呼び出して写真を撮り、リアルタイムフィルターを追加します: クイックスタートガイド

WBOYオリジナル: 2023-07-31 21:27:191233ブラウズ

写真技術は常に革新と発展を続けており、現在では PHP 言語を使用してカメラを呼び出し、リアルタイムフィルターを追加できるようになりました。リアルタイムのフィルター効果で、写真にさらに楽しみを加えます。この記事では、PHP を使用してカメラを呼び出して写真を撮り、必要なリアルタイムフィルター効果を追加する方法を説明するクイックスタートガイドを提供します。

1. 必要なコンポーネントとライブラリをインストールします

まず、この機能を実現するために必要なコンポーネントとライブラリをインストールする必要があります。次のコンポーネントをインストールする必要があります。

PHP-GD ライブラリ: これは、フィルターやその他の画像処理操作を追加するために使用できる PHP 画像処理ライブラリです。
Video4Linux: これは、Linux システムにビデオキャプチャ機能を提供するインターフェイスです。

次のコマンドを使用して、これらのコンポーネントを Ubuntu システムにインストールできます:

sudo apt-get install php-gd
sudo apt-get install v4l-utils

2. カメラのリアルタイムプレビューページを作成します

次に、次の必要があります。カメラのライブプレビューを表示するための PHP ページを作成します。次のコードを使用して、カメラのライブ画像を表示する簡単なページを作成できます。

<!DOCTYPE html>
<html>
<head>
    <title>Camera Preview</title>
</head>
<body>
    <h1>Camera Preview</h1>
    <img id="preview" src="" width="640" height="480" />
    <script>
        var videoElem = document.createElement('video');
        var canvasElem = document.createElement('canvas');
        var context = canvasElem.getContext('2d');

        navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
            videoElem.srcObject = stream;
            videoElem.play();

            setInterval(function() {
                context.drawImage(videoElem, 0, 0, canvasElem.width, canvasElem.height);
                var imgData = canvasElem.toDataURL('image/jpeg');
                document.getElementById('preview').src = imgData;
            }, 1000);
        }).catch(function(error) {
            console.log('Error: ' + error.message);
        });
    </script>
</body>
</html>

このコードは、JavaScript の getUserMedia API を使用してカメラにアクセスし、ライブプレビュー画像を表示します。 Canvas 要素を通じてリアルタイム画像をキャンバスに描画し、画像データを Base64 エンコード形式の URL に変換して、プレビュー画像を表示する img 要素に割り当てます。

3. リアルタイムフィルター効果の追加

ここで、カメラのリアルタイムプレビュー機能を実装しました。次に、このページにライブフィルター効果を追加します。 PHP-GD ライブラリを使用すると、画像にさまざまなフィルター効果を追加できます。

まず、フィルター選択ボックスを追加し、その値を PHP コードに渡す必要があります。次のコードを使用して、上で作成したプレビューページを変更します:

<!DOCTYPE html>
<html>
<head>
    <title>Camera Preview with Filters</title>
</head>
<body>
    <h1>Camera Preview with Filters</h1>
    <img id="preview" src="" width="640" height="480" />
    <select id="filter">
        <option value="none">None</option>
        <option value="grayscale">Grayscale</option>
        <option value="sepia">Sepia</option>
        <option value="invert">Invert</option>
    </select>

    <script>
        // ... JavaScript code for camera preview ...

        document.getElementById('filter').addEventListener('change', function() {
            var filter = this.value;
            var imgData = canvasElem.toDataURL('image/jpeg');
            
            // Send imgData and filter to server-side PHP code for processing
        });
    </script>
</body>
</html>

フィルター選択ボックスとして選択要素を追加し、JavaScript でイベントリスナーを追加しました。選択ボックスの値が変更されると、選択されたフィルターが値と画像データは、処理のためにサーバー側の PHP コードに送信されます。

ここで、サーバー側の PHP コードでこのデータを受け取り、選択したフィルター値に基づいて対応する効果を画像に追加する必要があります。次のコードを使用して、フィルター効果を処理するための別の PHP ファイルを作成します。

<?php
// Process the image based on the selected filter
if(isset($_POST['filter']) && isset($_POST['imgData'])) {
    $imgData = $_POST['imgData'];
    $filter = $_POST['filter'];
    
    // Create GD image resource from Base64 image data
    $imgResource = imagecreatefromstring(base64_decode(str_replace('data:image/jpeg;base64,', '', $imgData)));

    // Apply filters based on the selected option
    switch($filter) {
        case 'none':
            break;
        case 'grayscale':
            imagefilter($imgResource, IMG_FILTER_GRAYSCALE);
            break;
        case 'sepia':
            imagefilter($imgResource, IMG_FILTER_GRAYSCALE);
            imagefilter($imgResource, IMG_FILTER_COLORIZE, 90, 60, 40);
            break;
        case 'invert':
            imagefilter($imgResource, IMG_FILTER_NEGATE);
            break;
    }

    // Output the filtered image
    header('Content-Type: image/jpeg');
    imagejpeg($imgResource);

    // Clean up resources
    imagedestroy($imgResource);
}
?>

このコードは、PHP-GD ライブラリを使用して、受け取ったフィルター値に基づいて対応する効果を画像に追加し、処理します。最終的な画像は次のとおりです。 JPEG形式で出力します。

最後に、画像データとフィルターオプションをサーバー側の PHP コードに送信して処理できるように、前のプレビューページを変更する必要があります。前に作成したプレビューページの JavaScript コードを変更し、次のコードに置き換えます。

// ... JavaScript code for camera preview ...

document.getElementById('filter').addEventListener('change', function() {
    var filter = this.value;
    var imgData = canvasElem.toDataURL('image/jpeg');
    
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'filter.php', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function() {
        if(xhr.readyState === 4 && xhr.status === 200) {
            document.getElementById('preview').src = 'data:image/jpeg;base64,' + xhr.responseText;
        }
    };

    var data = 'filter=' + encodeURIComponent(filter) + '&imgData=' + encodeURIComponent(imgData);
    xhr.send(data);
});

JavaScript の XMLHttpRequest オブジェクトを通じて、POST リクエストを送信して、選択したフィルター値と画像データをサーバー側に渡すことができます。 PHP コードが処理されます。次に、サーバーから返された処理済み画像の Base64 エンコードデータに基づいて、プレビュー画像の src 属性に割り当てます。

これで、ブラウザでこのプレビューページを開いて、さまざまなフィルター効果を選択して、リアルタイムプレビューイメージの変化を確認できます。写真ボタンをクリックすると、PHP コードが選択したフィルター効果を画像に追加して出力します。

この記事では、PHP を使用してカメラを呼び出して写真を撮り、リアルタイムのフィルター効果を追加する方法を説明する、シンプルだが基本的なクイックスタートガイドを提供します。 PHP-GD ライブラリと Video4Linux インターフェイスを使用すると、この機能をさらに拡張および改善し、写真によりクリエイティブな効果を追加できます。楽しくコーディングしてください!

参考資料:

[PHP GD](https://www.php.net/manual/en/book.image.php)
[Video4Linux](https://www.kernel.org/doc/html/v4.15/media/uapi/v4l/v4l2.html)

以上がPHP はカメラを呼び出して写真を撮り、リアルタイムフィルターを追加します: クイックスタートガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：ステップバイステップのチュートリアル: PHP 拡張機能 ZipArchive を使用してファイルを圧縮および解凍する方法次の記事：ステップバイステップのチュートリアル: PHP 拡張機能 ZipArchive を使用してファイルを圧縮および解凍する方法

続きを見る

PHP はカメラを呼び出して写真を撮り、リアルタイム フィルターを追加します: クイック スタート ガイド

関連記事

PHP はカメラを呼び出して写真を撮り、リアルタイムフィルターを追加します: クイックスタートガイド