Komentar: Dengan dukungan spesifikasi HTML5, menjadi mungkin bagi Webapp untuk mengambil foto di ponsel. Di bawah ini, saya akan menjelaskan bagaimana aplikasi web mengambil foto dengan ponsel Anda, menampilkannya di halaman dan mengunggahnya ke server
1. Video Streaming
HTML5 Media Capture API menyediakan akses yang dapat diprogram ke kamera, dan pengguna dapat secara langsung menggunakan GetUsermedia untuk mendapatkan aliran video yang disediakan oleh kamera. Yang perlu kita lakukan adalah menambahkan tag video HTML5 dan mendapatkan video dari kamera sebagai sumber input untuk tag ini (perhatikan bahwa hanya chrome dan opera yang saat ini mendukung getusermedia).
<VideoDvideoid = VideoUutOplay = "> </dide>
<script>
varvideo_element = document.getElementById ('video');
if (navigator.getusermedia) {// operashoulduseopera.getusermedianow
navigator.getusermedia ('video', sukses, kesalahan);
}
functionsuccess (stream) {
Video_element.src = stream;
}
</script>
Streaming video
2. Ambil foto
Untuk fungsi pemotretan foto, kami menggunakan kanvas HTML5 untuk menangkap konten tag video secara real time, dan elemen video dapat digunakan sebagai input ke gambar kanvas, yang bagus. Kode utamanya adalah sebagai berikut:
Kode javascript menyalin konten ke clipboard
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. Akuisisi gambar
Selanjutnya, kami ingin mendapatkan data gambar dari kanvas. Gagasan intinya adalah menggunakan kanvas 'Todataurl untuk mengonversi data Canvas' menjadi gambar PNG yang dikodekan base64-bit, mirip dengan format data: gambar/png; base64, xxxxx.
var imgdata = canvas.todataurl (gambar/png);
Karena data gambar yang sebenarnya adalah bagian setelah koma yang dikodekan base64, data gambar yang diproses oleh server kami yang sebenarnya harus menjadi bagian ini, dan kami dapat memperolehnya dengan dua cara.
Tipe pertama adalah mencegat string 22-bit sebagai data gambar di ujung depan, misalnya:
var data = imgdata.substr (22);
Jika Anda ingin mendapatkan ukuran gambar sebelum mengunggah, Anda dapat menggunakan:
var length = atob (data) .length; // atobdecodesastringofdatawhichhasbeenencodedusingbase-64encoding
Tipe kedua adalah mendapatkan data yang ditransmisikan pada backend dan mencegat string 22-bit dalam bahasa latar belakang. Misalnya, dalam PHP:
$ image = base64_decode (str_replace ('data: gambar/jpeg; base64,' ,, $ data);
4. Unggah gambar
Di ujung depan, Anda dapat menggunakan AJAX untuk mengunggah data gambar yang diperoleh di atas ke skrip latar belakang. Misalnya saat menggunakan jQuery:
$ .post ('unggah.php', {'data': data});
Di latar belakang kami menggunakan skrip PHP untuk menerima data dan menyimpannya sebagai gambar.
functionConvert_data ($ data) {
$ image = base64_decode (str_replace ('data: gambar/jpeg; base64,' ,, $ data);
save_to_file ($ image);
}
functionsave_to_file ($ image) {
$ fp = fopen ($ fileName, 'w');
fwrite ($ fp, $ image);
fclose ($ fp);
}
Harap dicatat bahwa solusi di atas tidak hanya dapat digunakan untuk unggahan foto aplikasi web, tetapi juga Anda dapat mengonversi output kanvas menjadi unggahan gambar. Dengan cara ini, Anda dapat menggunakan Canvas untuk memberi pengguna pengeditan gambar, seperti pemangkasan, pewarnaan, dan fungsi grafiti artboard grafiti, dan kemudian menyimpan gambar yang diedit pengguna ke server.