Commentaire: Avec le support des spécifications HTML5, il est devenu possible pour WebApp de prendre des photos sur les téléphones mobiles. Ci-dessous, je vais expliquer comment l'application Web prend des photos avec votre téléphone mobile, les affiche sur la page et les télécharge sur le serveur
1. Streaming vidéo
HTML5 L'API Media Capture fournit un accès programmable à la caméra, et les utilisateurs peuvent utiliser directement GetUserMedia pour obtenir le flux vidéo fourni par la caméra. Ce que nous devons faire, c'est ajouter une balise vidéo HTML5 et obtenir la vidéo de l'appareil photo comme source d'entrée pour cette balise (notez que seul Chrome et Opera prennent actuellement en charge GetUserMedia).
<videoidVideOoid = VideoAutoplay = "> </DICODE>
<cript>
varvideo_element = document.getElementById ('vidéo');
if (Navigator.getUserMedia) {// operashouldUseOpera.getUserMedianow
Navigator.getUserMedia («vidéo», succès, erreur);
}
fonctionsuccess (stream) {
video_element.src = stream;
}
</cript>
Streaming vidéo
2. Prenez des photos
Pour la fonction de prise de vue photo, nous utilisons le canevas HTML5 pour capturer le contenu des balises vidéo en temps réel, et les éléments vidéo peuvent être utilisés comme entrée pour les images de toile, ce qui est génial. Le code principal est le suivant:
JavaScript Code Copier le contenu dans le presse-papiers
var canvas = document.CreateElement ('Canvas');
var ctx = canvas.getContext ('2d');
var cw = vw;
var ch = vh;
ctx.fillStyle = # ffffff;
ctx.fillrect (0,0, cw, ch);
ctx.DrawImage (vidéo_element, 0,0, vvw, vvh, 0,0, vw, vh);
document.body.append (canvas);
3. Acquisition d'images
Ensuite, nous voulons obtenir des données d'image à partir du canevas. L'idée principale est d'utiliser Todataurl de Canvas pour convertir les données de Canvas en images PNG codées Base64 bits, similaires au format de données: image / png; base64, xxxxx.
var imgdata = canvas.todataurl (image / png);
Étant donné que les données d'image réelles sont la partie après la virgule codée Base64, les données d'image traitées par notre serveur réel doivent être cette partie, et nous pouvons l'obtenir de deux manières.
Le premier type consiste à intercepter les chaînes de 22 bits en tant que données d'image à l'avant, par exemple:
var data = imgdata.substr (22);
Si vous souhaitez obtenir la taille de l'image avant le téléchargement, vous pouvez utiliser:
var length = atoB (data) .length; // atobdecodesastringofdatawhichhasbeeencodedusingbase-64encoding
Le deuxième type consiste à obtenir les données transmises sur le backend et à intercepter la chaîne 22 bits dans la langue d'arrière-plan. Par exemple, en php:
$ image = base64_decode (str_replace ('data: image / jpeg; base64,' ,, $ data);
4. Télécharger des photos
À l'avant, 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:
$ .post ('upload.php', {'data': data});
En arrière-plan, nous utilisons des scripts PHP pour recevoir des données et les stocker sous forme d'images.
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 d'applications Web, mais vous pouvez également convertir la sortie du canevas en téléchargement d'image. De cette façon, vous pouvez utiliser Canvas pour fournir aux utilisateurs l'édition d'images, tels que les fonctions de recadrage, de coloration et de graffiti Artboard, puis enregistrer les images modifiées de l'utilisateur sur le serveur.