HTML استنادًا إلى لقطة شاشة لتنفيذ قماش

أتذكر مشاركة الجميع من قبل ، موضحة حلول لقطة الشاشة. لذلك أخطط هذه المرة لكتابة فكرة المشاركة مع الجميع. هذا مجرد عرض صغير بسيط للغاية. وفقا لعنوان رمز PO المعتاد.

الاداءات

التفكير العام

• اضبط مفتاح اختصار البداية/النهاية
• بعد البداية ، يتم رسم DOM إلى قماش لتغطية واجهة DOM الأصلية
• إضافة منطقة لقطة شاشة للماوس محاكاة قماش
• أضف قماشًا لرسم واجهة المتصفح المقابلة لمنطقة لقطة الشاشة للماوس (تم اعتراضها من القماش الأول)
• احفظ الصورة المعتادة

نظرًا لأن مفاتيح الاختصار قد تتسبب في تعارضات ، فإن مفاتيح الاختصار لا يمكن أن تحد من عدد مفاتيح الاختصار ، وبالتالي يتم تمرير شكل صفيف في المعلمة الأولى.

 شاشة الشاشة (QuickStartKey ، endkey) {// التوافق النظر في عدم استخدام ... string string var keylength = QuickStartKey.Length var waskeytrigger = {} var cantshot = false ... q uickstartkey. لا يتم تشغيل صفائف المعلمة عبر isKeyTrigger = = endkey) {...} آخر إذا (! CantStartShot) {iskeytrigger [keycode] = true var nottrigger ليتم تشغيله}) إذا (nottrigger.length === 0) {// لا يوجد مفتاح اختصار يجب تشغيله.

إذا قمت بتبني طريقة أصلية ، فيمكنك الرجوع إلى مقدمة DOM تحت MDN. الشيء الأكثر صعوبة هو أنك تحتاج إلى إنشاء عنصر يشارك في صورة SVG التي تحتوي على XML. كيفية حساب DOM المعروضة في المتصفح الحالي واستخراج ، هو في الواقع الأكثر مملة. في الواقع ، ليس لدى المؤلف فكرة جيدة لتنفيذ واحد =. = ، لذلك اخترت مكتبة HTML2Canvas لإكمال هذا. طريقة الاتصال العامة هي كما يلي:

 الدالة beginshot (CantStartShot) {if (CantStartShot) {html2canvas (document.body ، {onrendered: function (canvas) {// الحصول على صورة قماش مع نفس الواجهة})}}}}}}}}

كان من المفترض أن يكون هذا المكان في الأصل استخدام Canvasapi الأصلي ، ولكنه ينطوي على مشكلة بعد الضغط على الفأر. يتم حذفه عندما تسبب في mousemove. لمحاكاة عملية الرسم في الوقت الحقيقي. لم يجد المؤلف العاجز عن طريقة استخدام Canvas Native API. هنا يستخدم المؤلف مكتبة القماش القائمة على JQ تسمى JCanvas. هذا يلبي احتياجات المؤلف ، والإدراك على النحو التالي:

 $ ('#' +canvasid) .mousedown (function (e) {$ (# +canvasid) .removelayer (layername) // حذف layername layername += 1 startx = that._calculatingxy (e) .x // حساب وضع الماوس starty = that._calculatingxy (e) .y isshot = true $ (#+canvasid) .addlayer ({type: 'strugle' ، // strengular ... الاسم: layname ، اسم الطبقة x: startx ، y : starty ، العرض: 1 ، الارتفاع: 1})}). = that._calculatingxy (e) .y var width = movex -startx var height = movey -starty $ (#+canvasid) .addlayer ({type: 'strugle' ، ... الاسم: lay ername ، fromcenter: false: false ، x: startx ، y: starty ، width: width ، height}) $ (#+canvasid) .drayers () ؛

 var canvasresult = document.getElementByid ('canvasresult') var ctx = canvasresult.getContext (2d) ؛ ، 0 ، 0 ، العرض ، الارتفاع) var dataurl = canvasresult.todataurl (Image/PNG) ؛

من بينها ، تم اعتراض الصورة بواسطة DrawImage ، ثم تم تحويل الصورة إلى ترميز BASE64 باستخدام طريقة TODATAURL

 وظيفة تنزيل (EL ، Filename ، HREF) {el.attr ({'Download': filename ، 'href': href})} ... downloadFile ($ ('. ok') ، 'screenshot' + math .random ( .random () .tring ().

من بينها ، يمكن تنزيل سمة التنزيل الخاصة بالعلامة مباشرة عندما ينقر المستخدم.

 <script src = https: //cdn.bootcss.com/jquery/jquery jcanvas.min.js> </script> <script src = https: //cdn.bootcss.com/html2canvas/0.5.0-html2canvas.min.js> </script>

 لقطة الشاشة ([16 ، 65] ، 27) // بدء تشغيل مفتاح الاختصار لتحويل+A ؛

يستخدم المكان الأكثر إثارة للاشمئزاز في المقالة (يكتب DOM مع طبقات إعداد القماش واللوحة) مكتبتين للتنفيذ ، على التوالي. أنه لا يزال قليلا. جوهر

ما سبق هو كل محتويات هذا المقال.