ホームページ >バックエンド開発 >PHPチュートリアル >PHP カメラコールのケース: ダイナミックな写真コレクションを作成するための秘密
PHP カメラコールのケース: ダイナミックな写真コレクションを作成するための秘密
- PHPzオリジナル
- 2023-07-30 23:33:211383ブラウズ
PHP カメラ呼び出しの事例: 動的な写真コレクションを作成するための秘密
カメラ呼び出しは、最新の Web アプリケーションの一般的な機能の 1 つです。カメラを呼び出すことで、写真の撮影やビデオの録画などのリアルタイムのインタラクティブ機能を実現できます。今回は、PHPを使ってカメラを呼び出す方法と、ダイナミックな写真集を作る場合に応用する方法を紹介します。
- カメラの許可を取得する
カメラを使用する前に、まずユーザーのカメラの許可を取得する必要があります。これは、HTML5 の getUserMedia メソッドを使用して実現できます。以下は簡単なサンプル コードです。
<!DOCTYPE html>
<html>
<head>
<title>摄像头权限获取示例</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<button id="startCamera">开始摄像头</button>
<video id="videoElement" autoplay></video>
<script>
$(document).ready(function() {
$('#startCamera').on('click', function() {
navigator.mediaDevices.getUserMedia({ video: true })
.then(function(stream) {
var video = document.getElementById('videoElement');
video.srcObject = stream;
video.play();
})
.catch(function(error) {
console.log('无法获取摄像头权限:', error);
});
});
});
</script>
</body>
</html>[Start Camera] ボタンをクリックすると、ユーザーのカメラ許可を取得し、ページにカメラ映像を表示できます。
- #写真機能
<!DOCTYPE html>
<html>
<head>
<title>摄像头拍照示例</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<button id="startCamera">开始摄像头</button>
<video id="videoElement" autoplay></video>
<button id="takePhoto">拍照</button>
<canvas id="canvasElement"></canvas>
<script>
$(document).ready(function() {
const video = document.getElementById('videoElement');
const canvas = document.getElementById('canvasElement');
const context = canvas.getContext('2d');
$('#startCamera').on('click', function() {
navigator.mediaDevices.getUserMedia({ video: true })
.then(function(stream) {
video.srcObject = stream;
video.play();
})
.catch(function(error) {
console.log('无法获取摄像头权限:', error);
});
});
$('#takePhoto').on('click', function() {
context.drawImage(video, 0, 0, canvas.width, canvas.height);
var imgData = canvas.toDataURL('image/png');
var link = document.createElement('a');
link.href = imgData;
link.download = 'photo.png';
link.click();
});
});
</script>
</body>
</html>
Photography ボタンをクリックすると、ページは現在のカメラ画像を Canvas 上に描画し、ダウンロード リンクを生成します。ユーザーはリンクをクリックして写真をダウンロードできます。
- ダイナミック フォト アルバム
<!DOCTYPE html>
<html>
<head>
<title>动态照片集示例</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<button id="startCamera">开始摄像头</button>
<video id="videoElement" autoplay></video>
<button id="takePhoto">拍照</button>
<div id="photoGallery"></div>
<script>
$(document).ready(function() {
const video = document.getElementById('videoElement');
const photoGallery = document.getElementById('photoGallery');
$('#startCamera').on('click', function() {
navigator.mediaDevices.getUserMedia({ video: true })
.then(function(stream) {
video.srcObject = stream;
video.play();
})
.catch(function(error) {
console.log('无法获取摄像头权限:', error);
});
});
$('#takePhoto').on('click', function() {
const photoContainer = document.createElement('div');
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
context.drawImage(video, 0, 0, canvas.width, canvas.height);
var imgData = canvas.toDataURL('image/png');
const photoElement = document.createElement('img');
photoElement.src = imgData;
const deleteButton = document.createElement('button');
deleteButton.textContent = '删除';
deleteButton.addEventListener('click', function() {
photoContainer.remove();
});
photoContainer.appendChild(photoElement);
photoContainer.appendChild(deleteButton);
photoGallery.appendChild(photoContainer);
});
});
</script>
</body>
</html>
Photography ボタンをクリックすると、ページは写真コレクションに撮影された写真を動的に追加し、削除機能を提供します。
以上がPHP カメラコールのケース: ダイナミックな写真コレクションを作成するための秘密の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。