نموذج التعليمات البرمجية للقطة شاشة للمتصفح باستخدام html2canvas

يجب تنفيذ استخدام html2canvas لتنفيذ لقطات شاشة المتصفح في بيئة الخادم.

يمكن لـ html2canvas التقاط لقطات شاشة من جانب المتصفح من خلال JS خالص، ولكن يجب تحسين دقة لقطات الشاشة، ولا يمكن التعرف على بعض ملفات CSS، لذلك لا يمكن تقديم نمط الشاشة الأصلي بشكل مثالي في اللوحة القماشية.

 /*لا يمكن حذف تجاوز الأسطر المتعددة، بل يمكن إخفاؤه فقط*/ .book_inf{ Position: approximate; : 2 - توجيه مربع الويب: عمودي }

1. فايرفوكس 3.5+
2. جوجل كروم
3. أوبرا 12+
4. آي إي 9+
5. سفاري 6+

 /*المعلمات: * #screenshots معرف العنصر المطلوب في لقطة الشاشة، الوظيفة التي سيتم تنفيذها بعد التقاط لقطة الشاشة، * لون الخلفية لعنصر تكوين لون الخلفية * القماش هو آخر قماش تم إرجاعه بعد التقاط لقطة الشاشة */function ScreenshotsImg(){ html2canvas (document.querySelector( #screenshots),{ الخلفية: 'transparent',// اضبط الخلفية لتكون شفافة}).then(canvas => { CanvasTurnImg(canvas) // طريقة تحويل تنسيق الصورة المحفوظة });

1. قم باستخراج بيانات تعريف الصورة مباشرة من اللوحة القماشية

 // تصدير الصورة إلى تنسيق png var type = 'png';

2. قم بتغيير نوع mime إلى image/octet-stream لإجبار المتصفح على التنزيل مباشرة.

 /** * احصل على mimeType * @param {String} اكتب نوع mime القديم * @return نوع mime الجديد */var _fixType = function(type) { type = type.toLowerCase().replace(/jpg/i , 'jpeg'); var r = type.match(/png|jpeg|bmp|gif/)[0]; return 'image/' + r;}; البيانات، استبدل mime typeimgData = imgData.replace(_fixType(type),'image/octet-stream');

3. قم بتنزيل الصورة على المستوى المحلي

 /** * حفظ الملفات محليًا * @param {String} data بيانات الصورة المراد حفظها محليًا * @param {String} filename file name */var saveFile = function(data, filename){ var save_link = document.createElementNS ('http ://www.w3.org/1999/xhtml', 'a'); save_link.href = data; save_link.download = filename; document.createEvent('MouseEvents'); events.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); حدث)؛}; // اسم الملف الذي تم تنزيله var filename = 'baidufe_' + (new Date()).getTime() + '.' downloadsaveFile(imgData,filename);

قضية

قضية

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.