recherche

Maison >développement back-end >tutoriel php >PHP appelle l'appareil photo pour prendre des photos et ajouter des filtres en temps réel : Guide de démarrage rapide

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

WBOY
WBOYoriginal
2023-07-31 21:27:191289parcourir

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 :

  1. 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.
  2. 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

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>

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>

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

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

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 :

  1. [PHP GD](https://www.php.net/manual/en/book.image.php)
  2. [Video4Linux](https://www.kernel. org /doc/html/v4.15/media/uapi/v4l/v4l2.html)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Tutoriel pas à pas : Comment compresser et décompresser des fichiers à l'aide de l'extension php ZipArchiveArticle suivant：Tutoriel pas à pas : Comment compresser et décompresser des fichiers à l'aide de l'extension php ZipArchive

Articles Liés

Voir plus