PHP ruft die Kamera auf, um Fotos aufzunehmen und Echtzeitfilter hinzuzufügen: Kurzanleitung-PHP-Tutorial-php.cn

PHP ruft die Kamera auf, um Fotos aufzunehmen und Echtzeitfilter hinzuzufügen: Kurzanleitung

WBOY

Freigeben： 2023-07-31 21:28:01

Original

1297 Leute haben es durchsucht

PHP ruft die Kamera zum Aufnehmen von Fotos auf und fügt Echtzeitfilter hinzu: Kurzanleitung

Die Fotografietechnologie wurde ständig weiterentwickelt und verbessert, und jetzt können wir die PHP-Sprache verwenden, um die Kamera aufzurufen und Echtzeitfiltereffekte hinzuzufügen mehr zu unseren Fotos Was für ein Spaß. In diesem Artikel erhalten Sie eine Kurzanleitung, die Ihnen zeigt, wie Sie mit PHP die Kamera aufrufen, um Fotos aufzunehmen und die gewünschten Echtzeit-Filtereffekte hinzuzufügen.

1. Installieren Sie die notwendigen Komponenten und Bibliotheken

Zunächst müssen wir einige notwendige Komponenten und Bibliotheken installieren, um diese Funktion zu implementieren. Wir müssen die folgenden Komponenten installieren:

PHP-GD-Bibliothek: Es handelt sich um eine PHP-Bildverarbeitungsbibliothek, die zum Hinzufügen von Filtern und anderen Bildverarbeitungsvorgängen verwendet werden kann.
Video4Linux: Dies ist eine Schnittstelle, die Videoaufnahmefunktionen für Linux-Systeme bereitstellt.

Sie können diese Komponenten mit dem folgenden Befehl auf Ihrem Ubuntu-System installieren:

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

Nach dem Login kopieren

2. Erstellen Sie eine Echtzeit-Vorschauseite der Kamera

Als nächstes müssen wir eine PHP-Seite erstellen, um die Echtzeitvorschau anzuzeigen der Kamera. Mit dem folgenden Code können Sie eine einfache Seite erstellen, um das Livebild der Kamera anzuzeigen:

<!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>

Nach dem Login kopieren

Dieser Code verwendet die getUserMedia-API von JavaScript, um auf die Kamera zuzugreifen und das Live-Vorschaubild anzuzeigen. Es zeichnet das Echtzeitbild über das Canvas-Element auf die Leinwand, wandelt die Bilddaten in eine URL im Base64-codierten Format um und weist sie dem img-Element zu, das das Vorschaubild anzeigt.

3. Echtzeit-Filtereffekte hinzufügen

Jetzt haben wir die Echtzeit-Vorschaufunktion der Kamera implementiert. Als Nächstes fügen wir dieser Seite einen Live-Filtereffekt hinzu. Mit der PHP-GD-Bibliothek können Sie Bildern verschiedene Filtereffekte hinzufügen.

Zuerst müssen wir ein Filterauswahlfeld hinzufügen und seinen Wert an den PHP-Code übergeben. Verwenden Sie den folgenden Code, um die oben erstellte Vorschauseite zu ändern:

<!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>

Nach dem Login kopieren

Wir haben ein Auswahlelement als Filterauswahlfeld und einen Ereignis-Listener in JavaScript hinzugefügt. Wenn sich der Wert des Auswahlfelds ändert, lautet der ausgewählte Filter Die Werte und Bilddaten werden zur Verarbeitung an den serverseitigen PHP-Code gesendet.

Jetzt müssen wir diese Daten im serverseitigen PHP-Code empfangen und dem Bild basierend auf dem ausgewählten Filterwert entsprechende Effekte hinzufügen. Verwenden Sie den folgenden Code, um eine unabhängige PHP-Datei zur Verarbeitung von Filtereffekten zu erstellen:

<?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);
}
?>

Nach dem Login kopieren

Dieser Code verwendet die PHP-GD-Bibliothek, um dem Bild basierend auf dem empfangenen Filterwert entsprechende Effekte hinzuzufügen und das verarbeitete Bild im JPEG-Format auszugeben.

Abschließend müssen wir die vorherige Vorschauseite ändern, um die Bilddaten und Filteroptionen zur Verarbeitung an den serverseitigen PHP-Code zu senden. Ändern Sie den JavaScript-Code auf der zuvor erstellten Vorschauseite und ersetzen Sie ihn durch den folgenden Code:

// ... 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);
});

Nach dem Login kopieren

Über das XMLHttpRequest-Objekt von JavaScript können wir eine POST-Anfrage senden, um den ausgewählten Filterwert und die Bilddaten zur Verarbeitung an den serverseitigen PHP-Code zu übergeben . Anschließend weisen wir es dem src-Attribut des Vorschaubilds zu, basierend auf den Base64-codierten Daten des verarbeiteten Bilds, die vom Server zurückgegeben werden.

Jetzt können Sie diese Vorschauseite in Ihrem Browser öffnen und versuchen, verschiedene Filtereffekte auszuwählen, um die Änderungen im Echtzeit-Vorschaubild zu sehen. Wenn Sie auf die Fotoschaltfläche klicken, fügt der PHP-Code dem Bild den ausgewählten Filtereffekt hinzu und gibt ihn aus.

Dieser Artikel bietet eine einfache, aber grundlegende Schnellstartanleitung, die Ihnen zeigt, wie Sie mit PHP die Kamera aufrufen, um Fotos aufzunehmen und Echtzeit-Filtereffekte hinzuzufügen. Durch die Verwendung der PHP-GD-Bibliothek und der Video4Linux-Schnittstelle können Sie diese Funktionalität weiter erweitern und verbessern und Ihren Fotos weitere kreative Effekte hinzufügen. Viel Spaß beim Codieren!

Referenzen:

[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)

Das obige ist der detaillierte Inhalt vonPHP ruft die Kamera auf, um Fotos aufzunehmen und Echtzeitfilter hinzuzufügen: Kurzanleitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!