PHP appelle l'appareil photo pour prendre des photos et ajouter des filtres en temps réel : Guide de démarrage rapide-tutoriel php-php.cn

PHP appelle l'appareil photo pour prendre des photos et ajouter des filtres en temps réel : Guide de démarrage rapide

WBOY

Libérer： 2023-07-31 21:28:01

original

1273 Les gens l'ont consulté

PHP appelle l'appareil photo pour prendre des photos et ajoute des filtres en temps réel : Guide de démarrage rapide

La technologie photographique a constamment innové et développé, et maintenant, nous pouvons utiliser le langage PHP pour appeler l'appareil photo et ajouter des effets de filtre en temps réel pour ajouter plus à nos photos Quel plaisir. Cet article vous fournira un guide de démarrage rapide pour vous apprendre à utiliser PHP pour appeler l'appareil photo afin de prendre des photos et ajouter les effets de filtre en temps réel souhaités.

1. Installez les composants et bibliothèques nécessaires

Tout d'abord, nous devons installer certains composants et bibliothèques nécessaires pour implémenter cette fonction. Nous devons installer les composants suivants :

Bibliothèque PHP-GD : Il s'agit d'une bibliothèque de traitement d'image PHP qui peut être utilisée pour ajouter des filtres et d'autres opérations de traitement d'image.
Video4Linux : Il s'agit d'une interface qui fournit une fonctionnalité de capture vidéo pour les systèmes Linux.

Vous pouvez installer ces composants sur votre système Ubuntu via la commande suivante :

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

Copier après la connexion

2. Créez une page d'aperçu en temps réel de la caméra

Ensuite, nous devons créer une page PHP pour afficher l'aperçu en temps réel de la caméra. Vous pouvez utiliser le code suivant pour créer une page simple pour afficher l'image en direct de la caméra :

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

Copier après la connexion

Ce code utilise l'API getUserMedia de JavaScript pour accéder à la caméra et afficher l'image d'aperçu en direct. Il dessine l'image en temps réel sur le canevas via l'élément canvas, convertit les données de l'image en une URL au format codé en Base64 et l'attribue à l'élément img qui affiche l'image d'aperçu.

3. Ajoutez des effets de filtre en temps réel

Maintenant, nous avons implémenté la fonction de prévisualisation en temps réel de la caméra. Ensuite, nous ajouterons un effet de filtre en direct à cette page. Vous pouvez utiliser la bibliothèque PHP-GD pour ajouter divers effets de filtre aux images.

Tout d'abord, nous devons ajouter une zone de sélection de filtre et transmettre sa valeur au code PHP. Utilisez le code suivant pour modifier la page d'aperçu créée ci-dessus :

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

Copier après la connexion

Nous avons ajouté un élément de sélection comme zone de sélection de filtre et ajouté un écouteur d'événement en JavaScript. Lorsque la valeur de la zone de sélection change, le filtre sélectionné sera Les valeurs . et les données d'image sont envoyées au code PHP côté serveur pour traitement.

Maintenant, nous devons recevoir ces données dans le code PHP côté serveur et ajouter les effets correspondants à l'image en fonction de la valeur de filtre sélectionnée. Utilisez le code suivant pour créer un fichier PHP indépendant pour traiter les effets de filtre :

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

Copier après la connexion

Ce code utilise la bibliothèque PHP-GD pour ajouter les effets correspondants à l'image en fonction de la valeur de filtre reçue et générer l'image traitée au format JPEG.

Enfin, nous devons modifier la page d'aperçu précédente pour envoyer les données d'image et les options de filtrage au code PHP côté serveur pour traitement. Modifiez le code JavaScript dans la page d'aperçu créée précédemment et remplacez-le par le code suivant :

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

Copier après la connexion

Grâce à l'objet XMLHttpRequest de JavaScript, nous pouvons envoyer une requête POST pour transmettre la valeur du filtre sélectionné et les données de l'image au code PHP côté serveur pour traitement. . Ensuite, nous l'attribuons à l'attribut src de l'image d'aperçu en fonction des données codées en Base64 de l'image traitée renvoyées par le serveur.

Maintenant, vous pouvez ouvrir cette page d'aperçu dans votre navigateur et essayer de choisir différents effets de filtre pour voir les changements dans l'image d'aperçu en temps réel. Lorsque vous cliquez sur le bouton photo, le code PHP ajoutera l'effet de filtre sélectionné à l'image et l'affichera.

Cet article fournit un guide de démarrage rapide simple mais basique pour vous apprendre à utiliser PHP pour appeler l'appareil photo afin de prendre des photos et d'ajouter des effets de filtre en temps réel. En utilisant la bibliothèque PHP-GD et l'interface Video4Linux, vous pouvez étendre et améliorer davantage cette fonctionnalité et ajouter des effets plus créatifs à vos photos. Bon codage !

Références :