يجب تنفيذ استخدام html2canvas لتنفيذ لقطات شاشة المتصفح في بيئة الخادم.
تأثيريمكن لـ html2canvas التقاط لقطات شاشة من جانب المتصفح من خلال JS خالص، ولكن يجب تحسين دقة لقطات الشاشة، ولا يمكن التعرف على بعض ملفات CSS، لذلك لا يمكن تقديم نمط الشاشة الأصلي بشكل مثالي في اللوحة القماشية.
/*لا يمكن حذف تجاوز الأسطر المتعددة، بل يمكن إخفاؤه فقط*/ .book_inf{ Position: approximate; : 2 - توجيه مربع الويب: عمودي } المتصفحات المدعومة /*المعلمات: * #screenshots معرف العنصر المطلوب في لقطة الشاشة، الوظيفة التي سيتم تنفيذها بعد التقاط لقطة الشاشة، * لون الخلفية لعنصر تكوين لون الخلفية * القماش هو آخر قماش تم إرجاعه بعد التقاط لقطة الشاشة */function ScreenshotsImg(){ html2canvas (document.querySelector( #screenshots),{ الخلفية: 'transparent',// اضبط الخلفية لتكون شفافة}).then(canvas => { CanvasTurnImg(canvas) // طريقة تحويل تنسيق الصورة المحفوظة }); عناصر التكوين المتاحة| اسم المعلمة | يكتب | القيمة الافتراضية | يصف |
|---|---|---|---|
| allowTaint | منطقية | خطأ شنيع | ما إذا كان سيتم السماح للصور ذات الأصل المشترك بتشويه اللوحة القماشية --- السماح بأصل مشترك |
| خلفية | خيط | #ففف | لون خلفية القماش، إذا لم يتم تحديد أي شيء في DOM، قم بتعيين لون خلفية شفاف --- لون خلفية قماش، إذا لم يتم تعيين اللون الأبيض الافتراضي، فهذا فخ، لقد قمت بتغييره إلى لون الخلفية. |
| ارتفاع | رقم | باطل | حدد ارتفاع اللوحة القماشية بالبكسل، إذا كانت فارغة، فسيتم عرضها مع الارتفاع الكامل للنافذة.---إعداد ارتفاع اللوحة القماشية |
| letterRendering | منطقية | خطأ شنيع | ما إذا كان سيتم عرض كل حرف بشكل منفصل، وهو أمر ضروري في حالة استخدام تباعد الأحرف.---مفيد عند ضبط تباعد الأحرف |
| تسجيل | منطقية | خطأ شنيع | ما إذا كان سيتم تسجيل الأحداث في وحدة التحكم.---إخراج المعلومات في console.log() |
| الوكيل | خيط | غير محدد | عنوان URL للوكيل الذي سيتم استخدامه لتحميل الصور ذات الأصل المشترك إذا تركت فارغة، فلن يتم تحميل الصور ذات الأصل المشترك.---عنوان الوكيل |
| tainTest | منطقية | حقيقي | ما إذا كان سيتم اختبار كل صورة إذا كانت ملوثة بالقماش قبل رسمها --- ما إذا كان سيتم اختبار الصورة قبل عرضها |
| نفذ الوقت | رقم | 0 | مهلة تحميل الصور، بالمللي ثانية، سيؤدي ضبطها على 0 إلى عدم انتهاء المهلة.---تأخير تحميل الصور، التأخير الافتراضي هو 0، بالمللي ثانية. |
| عرض | رقم | باطل | حدد عرض اللوحة القماشية بالبكسل، إذا كانت فارغة، فسيتم عرضها بالعرض الكامل للنافذة.---عرض اللوحة القماشية |
| useCORS | منطقية | خطأ شنيع | ما إذا كان سيتم محاولة تحميل الصور ذات الأصل المشترك كما يتم تقديم CORS، قبل العودة مرة أخرى إلى الوكيل - الوكيل عبر الأصل |
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.