So implementieren Sie die Kamerafunktion mit Javascript+php

Dank der kontinuierlichen Weiterentwicklung der Fototechnologie können wir jetzt Fotos über Websites oder APPs aufnehmen. Javascript und PHP sind häufig verwendete Technologien in der Webentwicklung. In diesem Artikel wird erläutert, wie diese beiden Technologien zur Implementierung der Kamerafunktion verwendet werden.

1. Verwenden Sie Javascript, um Fotos aufzunehmen.

Verwenden Sie Javascript im Browser, um das Kamerabild abzurufen, und verwenden Sie dann Canvas, um Fotos aufzunehmen. Wir können die getUserMedia-API von HTML5 verwenden, um die Berechtigungen der Kamera zu erhalten und den Kamerabildschirm auf die Leinwand zu zeichnen.

(1) Kameraberechtigung einholen

Die Verwendung der getUserMedia-API zum Erhalten einer Kameraberechtigung erfordert die Übergabe eines MediaStream-Objekts, das die Kamera und das Audiogerät enthält, an die Rückruffunktion. Dieses Objekt kann durch Aufrufen der Funktion navigator.mediaDevices.getUserMedia abgerufen werden.

navigator.mediaDevices.getUserMedia({ 
    video: true,
    audio: false
}).then(stream => {
    let video = document.querySelector('video');
    video.srcObject = stream;
}).catch(error => {
    console.log(error);
});

Im obigen Code verwenden wir die Funktion navigator.mediaDevices.getUserMedia(), um die Erlaubnis des Benutzers anzufordern. Unter diesen gibt der Videoparameter die Anforderung eines Videostreams an, und der Audioparameter gibt die Anforderung eines Audiostreams an. Wenn der Benutzer zustimmt, wird ein MediaStream-Objekt zurückgegeben, das den Videostream und den Audiostream enthält. Wenn der Benutzer dies ablehnt oder das Gerät dies nicht unterstützt, wird ein Fehlerobjekt zurückgegeben.

(2) Zeichnen Sie das Kamerabild auf die Leinwand.

Nachdem wir den Videostream erhalten haben, müssen wir das Video in ein Bild umwandeln und es auf der Seite anzeigen. Dieser Prozess kann durch eine Kombination aus Videoelementen und Canvas-Elementen erreicht werden.

<video id="video" autoplay="true" width="300px" height="200px" ></video>
<canvas id="canvas" width="300px" height="200px" ></canvas>

Zuerst platzieren wir ein Video-Element und ein Canvas-Element auf der Seite. Das Video-Element wird zum Abspielen von Videos verwendet und das Canvas-Element dient zur Anzeige der aufzunehmenden Szene. Durch Aufrufen der Methode getContext('2d') von Canvas können Sie den Kontext der Leinwand abrufen und dann mit der Methode drawImage das Video auf die Leinwand zeichnen.

let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

let video = document.querySelector('video');
let width = canvas.width;
let height = canvas.height;

ctx.drawImage(video, 0, 0, width, height);

Im obigen Code erhalten wir den Kontext des Canvas-Elements und zeichnen dann das Bild des Video-Elements über die Methode drawImage auf die Leinwand. Der erste Parameter der Methode drawImage gibt das zu zeichnende Element an, der zweite und dritte Parameter geben die Zeichnungsposition an und der vierte und fünfte Parameter geben die Breite und Höhe der Zeichnung an.

(3) Implementieren Sie die Kamerafunktion

Abschließend müssen wir die Kamerafunktion implementieren. Die Kamerafunktion generiert tatsächlich ein Bild aus dem Bild, das sich aktuell auf der Leinwand befindet. Dies können wir durch die Methode toDataURL() erreichen. Die

let dataURL = canvas.toDataURL();

toDataURL-Methode codiert das Bild auf der Leinwand in eine Base64-codierte Zeichenfolge, sodass wir diese Zeichenfolge als Wert des Formulars an den Server senden können.

2. Verwenden Sie PHP, um Fotodaten zu verarbeiten. Auf der Serverseite können wir PHP verwenden, um die vom Client übermittelten Fotodaten zu verarbeiten. Konkret müssen wir die Base64-kodierten Daten in Binärdaten dekodieren und sie dann im angegebenen Pfad speichern.

$image_data = $_POST['image_data'];
$image_data = str_replace('data:image/png;base64,', '', $image_data);
$image_data = str_replace(' ', '+', $image_data);

$image_binary = base64_decode($image_data);

$filename = date('YmdHis') . '.png';
$filedir = './upload/';
$file = $filedir . $filename;

file_put_contents($file, $image_binary);

Im obigen Code erhalten wir zunächst die Base64-codierten Daten des Bildes aus der POST-Anfrage, entfernen dann den Codierungsheader und die Leerzeichen und verwenden dann base64_decode, um das Bild in Binärdaten zu decodieren. Abschließend speichern wir das Bild in dem vom Server angegebenen Ordner.

3. Fazit

Durch die Kombination von Javascript und PHP können wir eine vollständige Fotoaufnahmefunktion implementieren und die Daten auf dem Server speichern. Diese Funktion kann auf Online-Fotoalben, das Hochladen von Avataren, die Identitätsprüfung usw. angewendet werden.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Kamerafunktion mit Javascript+php. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!