Comment implémenter la fonction caméra en utilisant javascript+php

Avec le développement continu de la technologie photographique, nous pouvons désormais prendre des photos via des sites Web ou des applications. Javascript et PHP sont des technologies couramment utilisées dans le développement Web. Cet article présentera comment utiliser ces deux technologies pour implémenter la fonction caméra.

1. Utilisez Javascript pour prendre des photos

Utilisez Javascript dans le navigateur pour obtenir l'image de la caméra, puis utilisez Canvas pour prendre des photos. Nous pouvons utiliser l'API getUserMedia de HTML5 pour obtenir les autorisations de la caméra et dessiner l'écran de la caméra sur le canevas.

(1) Obtenir l'autorisation de la caméra

L'utilisation de l'API getUserMedia pour obtenir l'autorisation de la caméra nécessite de transmettre un objet MediaStream contenant la caméra et le périphérique audio à la fonction de rappel. Cet objet peut être obtenu en appelant la fonction navigator.mediaDevices.getUserMedia.

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

Dans le code ci-dessus, nous utilisons la fonction navigator.mediaDevices.getUserMedia() pour demander l'autorisation de l'utilisateur. Parmi eux, le paramètre vidéo indique la demande d'un flux vidéo et le paramètre audio indique la demande d'un flux audio. Si l'utilisateur est d'accord, un objet MediaStream contenant le flux vidéo et le flux audio sera renvoyé. Si l'utilisateur refuse ou si l'appareil ne le prend pas en charge, un objet d'erreur est renvoyé.

(2) Dessinez l'image de la caméra sur la toile

Après avoir obtenu le flux vidéo, nous devons convertir la vidéo en image et l'afficher sur la page. Ce processus peut être réalisé grâce à une combinaison d’éléments vidéo et d’éléments Canvas.

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

Tout d'abord, nous plaçons un élément Vidéo et un élément Canvas sur la page. L'élément Video est utilisé pour lire des vidéos et l'élément Canvas est utilisé pour afficher la scène à tourner. En appelant la méthode getContext('2d') de Canvas, vous pouvez obtenir le contexte du canevas, puis utiliser la méthode drawImage pour dessiner la vidéo sur le canevas.

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

Dans le code ci-dessus, nous obtenons le contexte de l'élément Canvas, puis dessinons l'image de l'élément Video sur le Canvas via la méthode drawImage. Le premier paramètre de la méthode drawImage spécifie l'élément à dessiner, les deuxième et troisième paramètres spécifient la position du dessin et les quatrième et cinquième paramètres spécifient la largeur et la hauteur du dessin.

(3) Implémenter la fonction caméra

Enfin, nous devons implémenter la fonction caméra. La fonction caméra génère en fait une image à partir de l’image sur le canevas actuel. Nous pouvons y parvenir grâce à la méthode toDataURL(). La méthode

let dataURL = canvas.toDataURL();

toDataURL encodera l'image sur le canevas dans une chaîne codée en Base64, afin que nous puissions soumettre cette chaîne au serveur comme valeur du formulaire.

2. Utilisez PHP pour traiter les données photo

Côté serveur, nous pouvons utiliser PHP pour traiter les données photo soumises par le client. Plus précisément, nous devons décoder les données codées en Base64 en données binaires, puis les enregistrer dans le chemin spécifié.

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

Dans le code ci-dessus, nous obtenons d'abord les données codées en Base64 de l'image à partir de la requête POST, puis supprimons l'en-tête et les espaces de codage, puis utilisons base64_decode pour décoder l'image en données binaires. Enfin, nous enregistrons l'image dans le dossier spécifié par le serveur.

3. Conclusion

Grâce à la combinaison de Javascript et de PHP, nous pouvons implémenter une fonction complète de prise de photos et sauvegarder les données sur le serveur. Cette fonction peut être appliquée aux albums photo en ligne, au téléchargement d'avatars, à la vérification d'identité, etc.

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!