Kod pelaksanaan fungsi kamera HTML5 (fail muat naik HTML5)_kemahiran tutorial HTML5

1. Penstriman video

HTML5 Media Capture API menyediakan akses boleh atur cara kepada kamera Pengguna boleh terus menggunakan getUserMedia untuk mendapatkan strim video yang disediakan oleh kamera. Apa yang perlu kita lakukan ialah menambah teg Video HTML5 dan menggunakan video yang diperoleh daripada kamera sebagai sumber input teg ini (sila ambil perhatian bahawa pada masa ini hanya Chrome dan Opera menyokong getUserMedia).

Salin kod

Kod tersebut adalah seperti berikut:

varvideo_element=document.getElementById('video'); >navigator. getUserMedia('video',success,error);
}
functionsuccess(strim){
video_element.src=strim;


Penstriman video

2. Ambil foto

Untuk fungsi kamera, kami menggunakan HTML5 Canvas untuk menangkap kandungan teg Video dalam masa nyata Elemen Video boleh digunakan sebagai input imej Kanvas, yang sangat bagus. Kod utama adalah seperti berikut:

Salin kod

Kod tersebut adalah seperti berikut:Kod JavaScriptSalin kandungan ke papan keratanvar canvas=document.createElement('canvas'); ctx.fillStyle =”#ffffff”;

ctx.fillRect(0,0,cw,ch); ;

document.body.append(kanvas);

3. Pemerolehan imej

Seterusnya kita akan mendapatkan data imej daripada Canvas Idea terasnya ialah menggunakan toDataURL canvas untuk menukar data Canvas kepada imej PNG yang dikodkan base64-bit, serupa dengan format "data:image/png;base64, xxxxx".






Salin kod

Kod tersebut adalah seperti berikut:

var imgData=canvas.toDataURL (“imej /png”);

Oleh kerana data imej sebenar adalah bahagian selepas koma dalam pengekodan base64, data imej yang diproses oleh pelayan sebenar kami sepatutnya menjadi bahagian ini Kami boleh mendapatkannya dalam dua cara.

Kaedah pertama ialah memintas rentetan selepas 22 bit di hujung hadapan sebagai data imej, contohnya:

Salin kod

Kodnya adalah seperti berikut:

var data=imgData.substr (22) ;

Jika anda ingin mendapatkan saiz imej sebelum memuat naik, anda boleh menggunakan:

Salin kod

Kod adalah seperti berikut:

var length=atob(data ).panjang ;//atobdecodesastringofdatawhichhasbeenencodedusingbase-64encoding

Kaedah kedua ialah menggunakan bahasa latar belakang untuk memintas rentetan selepas 22 digit selepas memperoleh data yang dihantar di hujung belakang. Contohnya, dalam PHP:

Salin kod

Kod tersebut adalah seperti berikut:

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

4. Muat naik imej

Di bahagian hadapan, anda boleh menggunakan Ajax untuk memuat naik data imej yang diperoleh di atas ke skrip latar belakang. Contohnya apabila menggunakan jQuery:

Salin kod

Kod adalah seperti berikut:

$.post('upload .php' ,{'data':data});

Di latar belakang, kami menggunakan skrip PHP untuk menerima data dan menyimpannya sebagai imej.

Salin kodKodnya adalah seperti berikut:

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

}
functionsave_to_file($image){
$ fp=fopen($nama fail,'w');
fwrite($fp,$imej);

Sila ambil perhatian bahawa penyelesaian di atas bukan sahaja boleh digunakan untuk memuat naik foto Apl Web, tetapi anda juga boleh melaksanakan fungsi menukar output Kanvas kepada muat naik imej. Dengan cara ini, anda boleh menggunakan Kanvas untuk menyediakan pengguna dengan pengeditan imej, seperti memangkas, mewarna dan fungsi papan lukisan grafiti, dan kemudian menyimpan imej yang diedit pengguna ke pelayan.