Kommentar: Mit Unterstützung von HTML5 -Spezifikationen ist es für WebApp möglich geworden, Fotos auf Mobiltelefonen zu machen. Im Folgenden werde ich erklären, wie die Web -App Fotos mit Ihrem Mobiltelefon macht, sie auf der Seite anzeigt und auf den Server hochgeladen wird
1. Video -Streaming
HTML5 Die Media Capture API bietet programmierbaren Zugriff auf die Kamera, und Benutzer können GetUSerMedia direkt verwenden, um den von der Kamera bereitgestellten Videostream zu erhalten. Was wir tun müssen, ist ein HTML5 -Video -Tag hinzuzufügen und das Video von der Kamera als Eingabequelle für dieses Tag zu erhalten (beachten Sie, dass nur Chrome und Opera GetUsermedia unterstützen).
<videoIdvideoid = VideoAutoplay = "> </Video>
<Script>
varvideo_element = document.getElementById ('Video');
if (navigator.getUlermedia) {// operasoulduseopera.getUlermedianow
Navigator.getUlermedia ('Video', Erfolg, Fehler);
}
Funktionsuktion (Stream) {
Video_Element.src = Stream;
}
</script>
Video -Streaming
2. Machen Sie Fotos
Für die Fotoaufnahmefunktion verwenden wir HTML5 -Canvas, um den Inhalt von Video -Tags in Echtzeit zu erfassen, und Videoelemente können als Eingabe für Canvas -Bilder verwendet werden, was großartig ist. Der Hauptcode lautet wie folgt:
JavaScript -Code -Inhalt in Zwischenablage kopieren
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 (Video_Element, 0,0, VVW, VVH, 0,0, VW, VH);
document.body.Append (canvas);
3. Bildakquisition
Als nächstes möchten wir Bilddaten von Leinwand erhalten. Die Kernidee besteht darin, Canvas 'Todataurl zu verwenden, um die Daten von Canvas in Base64-Bit-codierte PNG-Bilder zu konvertieren, ähnlich dem Datenformat: Bild/PNG; Base64, XXXXX.
var imgdata = canvas.todataurl (Bild/PNG);
Da die tatsächlichen Bilddaten nach dem base64 codierten Komma der Teil sind, sollten die von unserem tatsächlichen Server verarbeiteten Bilddaten dieses Teil sein, und wir können diese auf zwei Arten erhalten.
Der erste Typ besteht darin, 22-Bit-Zeichenfolgen als Bilddaten am vorderen Ende abzufangen, zum Beispiel:
var data = imgdata.substr (22);
Wenn Sie vor dem Hochladen die Größe des Bildes erhalten möchten, können Sie verwenden:
var leng = atOB (Daten) .Length; // atobdecodesastringofdatawhichhasbeenCodedusedusedBase-64Coding
Der zweite Typ besteht darin, die übertragenen Daten im Backend zu erhalten und die 22-Bit-Zeichenfolge in der Hintergrundsprache abzufangen. Zum Beispiel in PHP:
$ image = base64_decode (str_replace ('Daten: Image/jpeg; Base64,' ,, $ data);
4. Bilder hochladen
Am vorderen Ende können Sie AJAX verwenden, um die oben erhaltenen Bilddaten in das Hintergrundskript hochzuladen. Zum Beispiel bei Verwendung von JQuery:
$ .post ('upload.php', {'data': data});
Im Hintergrund verwenden wir PHP -Skripte, um Daten zu empfangen und sie als Bilder zu speichern.
FunktionConvert_data ($ data) {
$ image = base64_decode (str_replace ('Daten: Image/jpeg; Base64,' ,, $ data);
save_to_file ($ image);
}
functionsave_to_file ($ image) {
$ fp = fopen ($ Dateiname, 'w');
fWrite ($ fp, $ image);
fcLose ($ fp);
}
Bitte beachten Sie, dass die obige Lösung nicht nur für das Hochladen von Web -Apps verwendet werden kann, sondern Sie auch die Ausgabe von Leinwand in das Bild -Upload umwandeln können. Auf diese Weise können Sie Leinwand verwenden, um den Benutzern eine Bildbearbeitung zu bieten, wie z. B. Schnitt-, Färben- und Graffiti -Kunstboardfunktionen, und dann die bearbeiteten Bilder des Benutzers auf dem Server speichern.