تعليق: بدعم من مواصفات HTML5 ، أصبح من الممكن أن يلتقط WebApp صورًا على الهواتف المحمولة. أدناه ، سأشرح كيف يلتقط تطبيق الويب صورًا بهاتفك المحمول ، ويعرضها على الصفحة وتحميلها على الخادم
1. دفق الفيديو
HTML5 يوفر API Capture API وصولًا قابلًا للبرمجة إلى الكاميرا ، ويمكن للمستخدمين استخدام GetUsermedia مباشرة للحصول على دفق الفيديو الذي توفره الكاميرا. ما يتعين علينا القيام به هو إضافة علامة فيديو HTML5 والحصول على الفيديو من الكاميرا كمصدر إدخال لهذه العلامة (لاحظ أن Chrome و Opera فقط تدعم GetUsermedia حاليًا).
<BideOidVideoid = videoAutoplay = "> </bool>
<script>
varvideo_element = document.getElementById ('video') ؛
if (navigator.getusermedia) {// operashoulduseOpera.getusermedianow
navigator.getusermedia ('video' ، success ، error) ؛
}
وظائف (دفق) {
video_element.src = Stream ؛
}
</script>
تدفق الفيديو
2. التقط الصور
بالنسبة لوظيفة التصوير الصور ، نستخدم قماشية HTML5 لالتقاط محتوى علامات الفيديو في الوقت الفعلي ، ويمكن استخدام عناصر الفيديو كمدخلات لصور قماش ، وهو أمر رائع. الرمز الرئيسي هو كما يلي:
رمز 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 (canvas) ؛
3. اكتساب الصورة
بعد ذلك ، نريد الحصول على بيانات صورة من قماش. تتمثل الفكرة الأساسية في استخدام Canvas 'Todataurl لتحويل بيانات Canvas إلى صور PNG المشفرة BASE64-BIT ، على غرار تنسيق البيانات: Image/PNG ؛ BASE64 ، XXXXX.
var imgdata = canvas.todataurl (image/png) ؛
نظرًا لأن بيانات الصورة الحقيقية هي الجزء بعد فاصلة BASE64 المشفرة ، يجب أن تكون بيانات الصورة التي تمت معالجتها بواسطة الخادم الفعلي لدينا هذا الجزء ، ويمكننا الحصول عليها بطريقتين.
النوع الأول هو اعتراض السلاسل 22 بت كبيانات صورة على الواجهة الأمامية ، على سبيل المثال:
var data = imgdata.substr (22) ؛
إذا كنت ترغب في الحصول على حجم الصورة قبل التحميل ، يمكنك استخدام:
var length = atoB (data) .Length ؛ // atoBdecodesastringofDatawhichhasbeenencodedusingBase-64Encoding
النوع الثاني هو الحصول على البيانات المنقولة على الواجهة الخلفية واعتراض السلسلة 22 بت في لغة الخلفية. على سبيل المثال ، في PHP:
$ image = base64_decode (str_replace ('Data: Image/JPeg ؛ base64 ،' ،، $ data) ؛
4. تحميل الصور
على الواجهة الأمامية ، يمكنك استخدام Ajax لتحميل بيانات الصورة التي تم الحصول عليها أعلاه إلى البرنامج النصي للخلفية. على سبيل المثال عند استخدام jQuery:
$ .post ('Upload.php' ، {'data': data}) ؛
في الخلفية ، نستخدم البرامج النصية PHP لتلقي البيانات وتخزينها كصور.
functionConvert_Data ($ data) {
$ image = base64_decode (str_replace ('Data: Image/JPeg ؛ base64 ،' ،، $ data) ؛
save_to_file ($ image) ؛
}
functionSave_TO_FILE ($ image) {
$ fp = fopen (اسم الملف $ ، 'w') ؛
fwrite ($ fp ، $ image) ؛
fclose ($ fp) ؛
}
يرجى ملاحظة أنه لا يمكن استخدام الحل أعلاه فقط لتحميل صور تطبيق الويب ، ولكن يمكنك أيضًا تحويل إخراج القماش إلى تحميل الصورة. وبهذه الطريقة ، يمكنك استخدام Canvas لتزويد المستخدمين بتحرير الصور ، مثل زراعة المحاصيل والتلوين ووظائف Graffiti Artboard ، ثم حفظ الصور التي تم تحريرها للمستخدم إلى الخادم.