في الآونة الأخيرة ، من أجل حل سجل المعلومات غير الطبيعي العام ، قام المشروع بدراسة وظيفة لقطة الشاشة الكاملة للمتصفح ، بحيث يمكن للمستخدمين لقطات الشاشة بسرعة وإرسالها إلى المسؤول عندما يجدون تشوهات. المعلومات النهائية المسجلة في السجل النهائي هي كما يلي.
مقدمة إلى HTML2Canvasفي الماضي ، لا يمكننا اعتراض الصور إلا من خلال أدوات شاشة الشاشة الأخرى. أصبحت وظيفة المتصفحات الحديثة أقوى وأقوى. HTML2CANVAS هو سد أمامي -ومبدأه هو رسم عقدة DOM في قماش. على الرغم من أنها مريحة ، إلا أن هناك الحد التالي:
نظرًا لأن سيناريو الاستخدام الخاص بي بسيط ، يتم تعريفه أيضًا بنفسي ، ويتم تعريف الصفحة غير الطبيعية أيضًا بنفسي ، ثم HTML2Canvas كافية.
استخدم مثيلاقتباس jQuery ، HTML2Canvas ، والرمز بسيط. يمكنني استخدام الإصدار HTML2Canvas 0.5.0 هنا
html2canvas (#tbl_exception) ، {onrendered: function (canvas) {var url = canvas.todataurl () ؛ pngto (body) ؛المعلمة الأولى هي كائن DOM إلى لقطة الشاشة ، ويتم تقديم المعلمة الثانية بعد قماش الاسترداد.
| اسم | يكتب | تقصير | وصف |
|---|---|---|---|
| alledtaint | منطقية | خطأ شنيع | ما إذا كنت للسماح للصور المتقاطعة بتشويه القماش |
| خلفية | خيط | #FFF | لون خلفية القماش ، إذا لم يتم ضبط أي منها في DOM. |
| ارتفاع | رقم | باطل | تحديد Heigt من القماش بالبكسل. |
| تحريك الرسائل | منطقية | خطأ شنيع | ما إذا كان لإعطاء كل حرف بشكل منفصل. |
| قطع الأشجار | منطقية | خطأ شنيع | سواء لتسجيل الأحداث في وحدة التحكم. |
| الوكيل | خيط | غير محدد | يجب استخدام عنوان URL للمشروع لتحميل الصور المتقاطعة. |
| tainttest | منطقية | حقيقي | ما إذا كنت تريد اختبار كل صورة إذا كانت تزين القماش قبل رسمها |
| نفذ الوقت | رقم | 0 | مهلة تحميل الصور ، بالمللي ثانية. |
| عرض | رقم | باطل | تحديد عرض القماش بالبكسل. |
| usecors | منطقية | خطأ شنيع | ما إذا كنت ستحاول تحميل الصور المتقاطعة على أنها cors servad ، قبل العودة إلى البروكسي |
بعد تقديمه ، عندما تتحدث عن المشكلات التي واجهتها في استخدامك ، يمكن لقطة الشاشة اعتراض المحتوى على الشاشة الحالية فقط. ابحث عن الحل بعد التحقق من رمز المصدر وتصحيح الأخطاء. يتم نشر رمز المصدر والرمز المعدل أدناه
رمز المصدر:
Return RenderDocument (Node.OwnerDocume ، الخيارات ، node.ownerdocument.defaultview.innerwidth ، node.ownerdocument.defaultview.innerheight ، inde x). {log) (Options.Onrendered يتم إهمالها ، HTML2Canvas ، هو الوعد الذي يحتوي على خيارات) ؛تعديل الكود:
// 2016-02-18 قم بتعديل الكود المصدر لحل المعلمة التي لا يمكن استخدامها لإضافة عرض مخصص إلى الشاشة لدعم VAR-Width. ! ) {log (Options.Onrendered يتم إهمالها ، html2canvas يعيد وعدًا يحتوي على خيارات) ؛يتم السماح للمستخدمين بشكل أساسي بتخصيص عرض وارتفاع كائن DOM عند الاتصال.
$ (#BTN_SCREEN) .on (انقر فوق ، function () {html2canvas ($ (#TBL_Exception) ، {height: $ (#tbl_exception) .outerheight () + 20 ، onrendered: fuins. (canvas) {var url = canvas. TODATAURL () ؛ [0] .click () ؛ لخصمن خلال القابس الأمامي ، يتم تنفيذ وظيفة الشاشة الكاملة للمتصفح. تعلم الجميع.