باستخدام لقطات شاشة JavaScript ، أود أن أوصي بمكونين مفتوح المصدر هنا: واحد هو Canvas2Image ، والتي يمكنها برمجة صور الرسم والبرمجة PNG/JPEG/BMP ؛ لكن وجودها بمفردها لا يكفي. نحتاج إلى أخذ لقطات شاشة لأي DOM (على الأقل الغالبية العظمى) ، والتي تتطلب HTML2Canvas ، والتي يمكنها تحويل كائن DOM إلى كائن قماش. الجمع بين وظائف الاثنين ، يمكنك أخذ لقطة الشاشة DOM على الصفحة في صور PNG أو JPEG ، وهو أمر رائع للغاية.
Canvas2Image
مبدأها هو استخدام كائن HTML5 Canvas لتوفير API Todataurl ():
نسخة الكود كما يلي:
var strdatauri = ocanvas.todataurl () ؛
// إرجاع "البيانات: Image/PNG ؛ BASE64 ، IVBORW0KGGOAAAANSUHUGAAAMAAADICAADICAACT ..."
والنتيجة هي BASE64-encoded (في الواقع ، يمكن أيضًا كتابة الصورة إلى الصفحة بهذه الطريقة في شكل سلسلة) ، لذلك نحتاج أيضًا إلى LIB المصنوع من BASE64.
ومع ذلك ، هناك العديد من العيوب في الوقت الحاضر. على سبيل المثال ، تدعم Opera و Safari فقط PNG ، في حين أن Firefox هو دعم أفضل بكثير.
هناك طريقتان لكتابة الصور إلى الصفحة. أحدهما هو إنشاء كائن صورة للكتابة إلى شجرة DOM Page ، وهي أيضًا طريقة داعمة أفضل:
نسخة الكود كما يلي:
// إرجاع عنصر <img> الذي يحتوي على صورة PNG المحولة
var oimgpng = canvas2image.saveaspng (Ocanvas ، true) ؛
ولكن إذا قمت بعمل وظيفة JavaScript لقطات الشاشة ، فقد ترغب في فتح مربع الحوار "حفظ" تلقائيًا لحفظ الملف بعد لقطة الشاشة:
نسخة الكود كما يلي:
Canvas2Image.saveaspng (Ocanvas) ؛
// سيطالب المستخدم بحفظ الصورة كـ PNG.
سيقوم استدعاء هذه الطريقة بإنشاء دفق بيانات باستخدام "صورة/ثمانية مثبتة" للمحاكاة إلى المتصفح ، ولكن لا يمكن لمربع الحوار "حفظ" التعرف على اسم الصورة المناسب للصورة. يسمى الملف المحفوظ الافتراضي "xxx.part" تحت Firefox. هذا أمر مؤسف ، لكن يبدو أنه لا يوجد حل جيد.
html2canvas
يعمل على عملية تحميل DOM ، ويجمع المعلومات الموجودة فيها ، ثم يرسم صورة القماش. بمعنى آخر ، لا يقطع شجرة DOM المعروضة إلى صورة قماش ، ولكن بدلاً من ذلك يعيد انخفاض صورة قماش استنادًا إلى شجرة DOM. لذلك ، لا يمكن تحديد العديد من أنماط CSS بدقة ولا يمكن أن تنعكس بدقة على الشكل.
هناك العديد من القيود الأخرى ، مثل:
● يجب أن يكون JavaScript من نفس المجال. بالنسبة لحالات المجال المتقاطع ، تحتاج إلى استخدام خادم وكيل (هناك معلمات في واجهة برمجة التطبيقات التي يمكن تحديدها) ، وينطبق الشيء نفسه على الصورة ؛
● لا يمكن رسم شجرة DOM في الإطار بدقة ؛
● لأنك تريد رسم مخطط قماش ، تحتاج متصفحات مثل IE8 إلى استخدام مكتبات الطرف الثالث مثل FlashCanvas.
يمكن لهذه الصفحة اختبار تأثير استخدامه على لقطات شاشة في كل موقع ويب ، والتأثير جيد جدًا:
أمثلة على استخدام API:
نسخة الكود كما يلي:
html2canvas (
[DOM1 ، DOM2] ،
{
قطع الأشجار: خطأ ،
usecors: خطأ ،
وكيل: خطأ ،
onrendered: وظيفة (قماش) {
// قماش هو كائن قماش مرسوم
}
}
) ؛
بالنسبة لهذا النوع من مكتبة الفئة المتخصصة نسبيًا ، فإن الوثائق سيئة للغاية ، بما في ذلك تعريف واجهة برمجة التطبيقات ، والذي يتطلب قراءة الكود المصدري ويتم كتابته بوضوح في الكود.
بالإضافة إلى ذلك ، يوجد أيضًا مكون إضافي في حزمة التنزيل في هذا الموقع ، والذي غلف API ويمكن تجاهله.