PHP はカメラを呼び出して写真を撮り、リアルタイム フィルターを追加します: クイック スタート ガイド
- WBOYオリジナル
- 2023-07-31 21:27:191257ブラウズ
PHP はカメラを呼び出して写真を撮り、リアルタイム フィルターを追加します: クイック スタート ガイド
写真技術は常に革新と発展を続けており、現在では 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 サイトの他の関連記事を参照してください。