ความคิดเห็น: ด้วยการสนับสนุนข้อมูลจำเพาะ HTML5 จึงเป็นไปได้ที่ WebApp จะถ่ายภาพบนโทรศัพท์มือถือ ด้านล่างนี้ฉันจะอธิบายว่าเว็บแอปถ่ายภาพด้วยโทรศัพท์มือถือของคุณแสดงบนหน้าเว็บและอัปโหลดไปยังเซิร์ฟเวอร์อย่างไร
1. การสตรีมวิดีโอ
HTML5 API Media Capture ให้การเข้าถึงกล้องที่ตั้งโปรแกรมได้และผู้ใช้สามารถใช้ getusermedia โดยตรงเพื่อรับสตรีมวิดีโอที่ได้รับจากกล้อง สิ่งที่เราต้องทำคือเพิ่มแท็กวิดีโอ HTML5 และรับวิดีโอจากกล้องเป็นแหล่งอินพุตสำหรับแท็กนี้ (โปรดทราบว่าเฉพาะ Chrome และ Opera เท่านั้นที่รองรับ Getusermedia)
<videoidvideoid = videoautoplay = "> </video>
<script>
varvideo_element = document.getElementById ('วิดีโอ');
if (navigator.getusermedia) {// operashoulduseopera.getusermedianow
navigator.getusermedia ('วิดีโอ', ความสำเร็จ, ข้อผิดพลาด);
-
functionsuccess (สตรีม) {
video_element.src = สตรีม;
-
</script>
สตรีมมิ่งวิดีโอ
2. ถ่ายภาพ
สำหรับฟังก์ชั่นการถ่ายภาพเราใช้ HTML5 Canvas เพื่อจับภาพเนื้อหาของแท็กวิดีโอแบบเรียลไทม์และองค์ประกอบวิดีโอสามารถใช้เป็นอินพุตไปยังภาพผ้าใบซึ่งยอดเยี่ยมมาก รหัสหลักมีดังนี้:
JavaScript รหัสคัดลอกเนื้อหาไปยังคลิปบอร์ด
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 (ผ้าใบ);
3. การได้มาภาพ
ต่อไปเราต้องการรับข้อมูลภาพจากผืนผ้าใบ แนวคิดหลักคือการใช้ Todataurl ของ Canvas เพื่อแปลงข้อมูล Canvas 'เป็นรูปภาพ PNG ที่เข้ารหัส Base64-bit ซึ่งคล้ายกับรูปแบบของข้อมูล: image/png; base64, xxxxx
var imgdata = canvas.todataurl (รูปภาพ/png);
เนื่องจากข้อมูลภาพจริงเป็นส่วนหนึ่งหลังจากเครื่องหมายจุลภาคที่เข้ารหัส Base64 ข้อมูลภาพที่ประมวลผลโดยเซิร์ฟเวอร์จริงของเราควรเป็นส่วนนี้และเราสามารถรับได้สองวิธี
ประเภทแรกคือการสกัดกั้นสตริง 22 บิตเป็นข้อมูลภาพที่ส่วนหน้าตัวอย่างเช่น:
var data = imgdata.substr (22);
หากคุณต้องการได้ขนาดของภาพก่อนอัปโหลดคุณสามารถใช้:
ความยาว var = atob (data) .length; // atobdecodesastringfdatawhichhasbeenencodedusingbase-64encoding
ประเภทที่สองคือการรับข้อมูลที่ส่งบนแบ็กเอนด์และสกัดกั้นสตริง 22 บิตในภาษาพื้นหลัง ตัวอย่างเช่นใน PHP:
$ image = base64_decode (str_replace ('ข้อมูล: image/jpeg; base64,' ,, $ data);
4. อัปโหลดรูปภาพ
ที่ปลายด้านหน้าคุณสามารถใช้ AJAX เพื่ออัปโหลดข้อมูลรูปภาพที่ได้รับด้านบนไปยังสคริปต์พื้นหลัง ตัวอย่างเช่นเมื่อใช้ jQuery:
$ .post ('upload.php', {'data': data});
ในพื้นหลังเราใช้สคริปต์ PHP เพื่อรับข้อมูลและจัดเก็บเป็นรูปภาพ
functionconvert_data ($ data) {
$ image = base64_decode (str_replace ('ข้อมูล: image/jpeg; base64,' ,, $ data);
save_to_file ($ image);
-
functionsave_to_file ($ image) {
$ fp = fopen ($ filename, 'w');
fwrite ($ fp, $ image);
fclose ($ fp);
-
โปรดทราบว่าโซลูชันด้านบนไม่เพียง แต่สามารถใช้สำหรับการอัปโหลดรูปภาพเว็บแอปเท่านั้น แต่ยังสามารถแปลงเอาต์พุต Canvas เป็นอัพโหลดรูปภาพได้ ด้วยวิธีนี้คุณสามารถใช้ผ้าใบเพื่อให้ผู้ใช้มีการแก้ไขรูปภาพเช่นการปลูกพืชการระบายสีและฟังก์ชั่นกราฟฟิตีจากนั้นบันทึกรูปภาพที่แก้ไขของผู้ใช้ลงในเซิร์ฟเวอร์