شرح - استخدام HTML5/Canvas/JavaScript لالتقاط لقطات شاشة في المتصفح




in html, which attribute is used to specify that an input field must be filled out? (2)

يمكن لتطبيق الويب الخاص بك الآن التقاط لقطة شاشة "أصلية" لسطح مكتب العميل بأكمله باستخدام getUserMedia() :

إلقاء نظرة على هذا المثال:

https://www.webrtc-experiment.com/Pluginfree-Screen-Sharing/

سيتعين على العميل استخدام chrome (في الوقت الحالي) وسيتعين عليه تمكين دعم التقاط الشاشة تحت chrome: // flags.

يتيح لك "الإبلاغ عن خطأ" من Google أو "أداة التعليقات" تحديد منطقة من نافذة المتصفح لإنشاء لقطة شاشة تم إرسالها مع تعليقاتك حول خطأ.

لقطة شاشة بواسطة Jason Small ، تم نشرها في سؤال مكرر .

كيف يفعلون هذا؟ يتم تحميل واجهة برمجة تطبيقات تعليقات جافا سكريبت من Google وستعرض نظرة عامة حول وحدة التعليقات على قدرة لقطة الشاشة.


تستطيع جافا سكريبت قراءة DOM وعرض تمثيل دقيق إلى حد ما لذلك باستخدام canvas . لقد كنت أعمل على برنامج نصي يقوم بتحويل html إلى صورة قماش. قررت اليوم أن تنفيذ ذلك في إرسال ردود الفعل مثلك وصفها.

يسمح لك البرنامج النصي بإنشاء نماذج التعليقات التي تتضمن لقطة شاشة تم إنشاؤها على متصفح العملاء ، بالإضافة إلى النموذج. تستند لقطة الشاشة إلى DOM ، وبالتالي قد لا تكون دقيقة بنسبة 100٪ بالنسبة إلى التمثيل الحقيقي لأنها لا تقدم لقطة شاشة فعلية ، ولكنها تبني لقطة الشاشة استنادًا إلى المعلومات المتوفرة على الصفحة.

لا يتطلب أي عرض من الخادم ، حيث يتم إنشاء الصورة بأكملها على متصفح العملاء. لا يزال النص البرمجي لـ HTML2Canvas نفسه في حالة تجريبية جدًا ، نظرًا لأنه لا يحلل تقريبًا الكثير من سمات CSS3 التي أريدها ، ولا يمتلك أي دعم لتحميل صور CORS حتى إذا كان الوكيل متاحًا.

لا يزال هناك توافق محدود للغاية مع المستعرض (ليس بسبب عدم إمكانية دعم المزيد ، فقط لم يكن لديك الوقت لجعله يدعم متصفحًا أكثر).

لمزيد من المعلومات ، ألق نظرة على الأمثلة هنا:

http://hertzen.com/experiments/jsfeedback/

تحرير النص html2canvas متوفر الآن بشكل منفصل here وبعض الأمثلة هنا .

edit 2 هناك تأكيد آخر على استخدام Google لطريقة مشابهة جدًا (في الواقع استنادًا إلى الوثائق التي يمثل الاختلاف الرئيسي الوحيد فيها طريقة التقاطع / التجاوز) في هذا العرض التقديمي من قِبل Elliott Sprehn من فريق تعليقات Google: http://www.elliottsprehn.com/preso/fluentconf/





screenshot