Implementierungscode für HTML5-Kamerafunktionen (HTML5-Upload-Datei)_HTML5-Tutorial-Fähigkeiten-H5-Tutorial-php.cn

Implementierungscode für HTML5-Kamerafunktionen (HTML5-Upload-Datei)_HTML5-Tutorial-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:48:35

Original

1743 Leute haben es durchsucht

1. Video-Streaming

HTML5 Die Media Capture API bietet programmierbaren Zugriff auf die Kamera. Benutzer können getUserMedia direkt verwenden, um den von der Kamera bereitgestellten Videostream abzurufen. Wir müssen lediglich ein HTML5-Video-Tag hinzufügen und das von der Kamera erhaltene Video als Eingabequelle für dieses Tag verwenden (bitte beachten Sie, dass getUserMedia derzeit nur Chrome und Opera unterstützen).

Code kopieren

Der Code lautet wie folgt:

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

Video-Streaming

2. Machen Sie Fotos

Für die Kamerafunktion verwenden wir HTML5 Canvas, um den Inhalt des Video-Tags in Echtzeit zu erfassen. Das Video-Element kann als Eingabe für das Canvas-Bild verwendet werden, was großartig ist. Der Hauptcode lautet wie folgt:

Code kopieren

Der Code lautet wie folgt:JavaScript-CodeKopieren Sie den Inhalt in die Zwischenablage

var canvas=document.createElement('canvas');

var ctx=canvas.getContext('2d');

var ch=vh; ctx.fillStyle =“#ffffff“;
ctx.fillRect(0,0,cw,ch) ;
document.body.append(canvas);

3. Bildaufnahme

Als nächstes werden wir Bilddaten von Canvas abrufen. Die Kernidee besteht darin, die toDataURL von Canvas zu verwenden, um die Canvas-Daten in ein Base64-Bit-codiertes PNG-Bild zu konvertieren, ähnlich dem Format „data:image/png;base64, xxxxx".

Code kopieren

Der Code lautet wie folgt:

var imgData=canvas.toDataURL („Bild /png“);

Da die tatsächlichen Bilddaten der Teil nach dem Komma in der Base64-Codierung sind, sollten die von unserem tatsächlichen Server verarbeiteten Bilddaten dieser Teil sein. Wir können ihn auf zwei Arten erhalten.

Die erste Methode besteht darin, die Zeichenfolge nach 22 Bit am Frontend als Bilddaten abzufangen, zum Beispiel:

Code kopieren

Der Code lautet wie folgt:

var data=imgData.substr (22) ;

Wenn Sie die Größe des Bildes vor dem Hochladen ermitteln möchten, können Sie Folgendes verwenden:

Code kopieren

Der Code lautet wie folgt:

var length=atob(data ).length ;//atobdekodiert einen Datenstring, der mit Base-64-Kodierung kodiert wurde

Die zweite Methode besteht darin, die Hintergrundsprache zu verwenden, um die Zeichenfolge nach 22 Ziffern abzufangen, nachdem die übertragenen Daten am Back-End abgerufen wurden. Zum Beispiel in PHP:

Code kopieren

Der Code lautet wie folgt:

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

4. Bild-Upload

Am Frontend können Sie Ajax verwenden, um die oben erhaltenen Bilddaten in das Hintergrundskript hochzuladen. Zum Beispiel bei Verwendung von jQuery:

Code kopieren

Der Code lautet wie folgt:

$.post('upload .php' ,{'data':data}); Im Hintergrund verwenden wir ein PHP-Skript, um die Daten zu empfangen und als Bild zu speichern.

Code kopieren

Der Code lautet wie folgt:

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

Bitte beachten Sie, dass die obige Lösung nicht nur zum Hochladen von Web-App-Fotos verwendet werden kann, sondern Sie können auch die Funktion zum Konvertieren der Canvas-Ausgabe in das Hochladen von Bildern implementieren. Auf diese Weise können Sie Canvas verwenden, um Benutzern Bildbearbeitungsfunktionen wie Zuschneiden, Färben und Graffiti-Zeichenbrettfunktionen bereitzustellen und dann die bearbeiteten Bilder des Benutzers auf dem Server zu speichern.