Code d'implémentation de la fonction de caméra HTML5 (fichier de téléchargement HTML5)_Compétences du didacticiel HTML5

1. Diffusion vidéo

HTML5 L'API Media Capture fournit un accès programmable à la caméra. Les utilisateurs peuvent directement utiliser getUserMedia pour obtenir le flux vidéo fourni par la caméra. Ce que nous devons faire est d'ajouter une balise vidéo HTML5 et d'utiliser la vidéo obtenue à partir de la caméra comme source d'entrée de cette balise (veuillez noter qu'actuellement, seuls Chrome et Opera prennent en charge getUserMedia).

Copier le code

Le code est le suivant :

<script> <br>varvideo_element=document.getElementById('video'); <br>if(navigator.getUserMedia){//operashoulduseopera.getUserMedianow <br>navigator.getUserMedia('video',success,error); <br>} <br>functionsuccess(stream){ <br>video_element.src=stream; <br></script>

Diffusion vidéo

2. Prendre des photos

Pour la fonction caméra, nous utilisons HTML5 Canvas pour capturer le contenu de la balise Video en temps réel. L'élément Video peut être utilisé comme entrée de l'image Canvas, ce qui est génial. Le code principal est le suivant :

Copier le codeLe code est le suivant :

Code JavaScriptCopiez le contenu dans le clipboard

var canvas=document.createElement('canvas');
var ctx=canvas.getContext('2d');
var cw=vw; ctx.fillStyle =”#ffffff”;
ctx.fillRect(0,0,cw,ch);
ctx.drawImage(video_element,0,0,vvw,vvh,0,0,vw,vh) ;
document.body.append(canvas);



3. Acquisition d'images

Ensuite, nous allons obtenir des données d'image de Canvas. L'idée principale est d'utiliser toDataURL de Canvas pour convertir les données Canvas en une image PNG codée en base64 bits, similaire au format "data:image/png;base64, xxxxx".

Copier le code

Le code est le suivant :var imgData=canvas.toDataURL (« image /png ») ;

Étant donné que les données d'image réelles sont la partie après la virgule dans l'encodage base64, les données d'image traitées par notre serveur actuel devraient être cette partie. Nous pouvons l'obtenir de deux manières.

La première méthode consiste à intercepter la chaîne après 22 bits au début en tant que données d'image, par exemple :

Copier le code

Le code est le suivant :var data=imgData.substr (22) ;

Si vous souhaitez obtenir la taille de l'image avant de la télécharger, vous pouvez utiliser :

Copier le code

Le code est le suivant :var length=atob(data ).length ;//atobdécode une chaîne de données qui a été codée en base 64

La deuxième méthode consiste à utiliser le langage d'arrière-plan pour intercepter la chaîne après 22 chiffres après avoir obtenu les données transmises au back-end. Par exemple, en PHP :

Copier le code

Le code est le suivant :$image=base64_decode(str_replace ('données :image/jpeg;base64,'",,$données

);
4. Téléchargement d'images

Sur le front-end, vous pouvez utiliser Ajax pour télécharger les données d'image obtenues ci-dessus dans le script d'arrière-plan. Par exemple lors de l'utilisation de jQuery :

Copier le code

Le code est le suivant :$.post('upload .php' ,{'data':data});

En arrière-plan, nous utilisons un script PHP pour recevoir les données et les stocker sous forme d'image.

Copier le code

Le code est le suivant :functionconvert_data($data){

$image=base64_decode(str_replace('data:image/jpeg;base64,',",$data);

save_to_file($image);

}
functionsave_to_file($image){
$ fp=fopen($filename,'w');
fwrite($fp,$image);
fclose($fp);

Veuillez noter que la solution ci-dessus peut non seulement être utilisée pour le téléchargement de photos sur une application Web, mais vous pouvez également implémenter la fonction de conversion de la sortie Canvas en téléchargement d'images. De cette façon, vous pouvez utiliser Canvas pour fournir aux utilisateurs des fonctions d'édition d'images, telles que des fonctions de recadrage, de coloration et de dessin de graffitis, puis enregistrer les images modifiées de l'utilisateur sur le serveur.