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

لقد استخدمت مؤخرًا html2canvas.js عند كتابة المشاريع، والتي يمكنها تحقيق وظيفة لقطة الشاشة للصفحة، لكنني واجهت العديد من المزالق، لذا سأكتب مقالًا لتسجيلها.

عند استخدام html2canvas، قد تواجه مشكلات مثل أنه لا يمكن التقاط سوى الواجهة المرئية، ولا تحتوي لقطة الشاشة على لون خلفية، ولا يمكن التقاط علامة svg، وفيما يلي شرح مفصل.

وغني عن القول أنه يمكن الحصول على هذا من جيثب: https://github.com/niklasvh/html2canvas

يمكنك أيضًا استيراد الرابط مباشرةً: <script src=https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js></script>

كما أنه سهل الاستخدام للغاية. يمكنك العثور على واجهة برمجة التطبيقات المحددة عبر الإنترنت واستخدام الصورة/png فقط لإنشاء صور بتنسيق png.

من بينها، $(#xxx) هو div الذي تريد اعتراضه ويمكن الحصول عليه من خلال jquery.

 html2canvas($(#xxx), { onrendered: function (canvas) { var url = Canvas.toDataURL(image/png); window.location.href = url; } });

بالنسبة للأنواع الأخرى من الصور مثل jpg، image/jpeg، وما إلى ذلك، يمكنك الاستعلام عن واجهة برمجة التطبيقات (API) بنفسك.

في الواقع، تم الانتهاء من لقطة الشاشة البسيطة هنا. إذا كانت الواجهة أكثر تعقيدًا بعض الشيء، فقد تظهر العديد من المخاطر، فلنحلها واحدة تلو الأخرى.

عندما نعترض div، إذا كان هناك علامة svg في div، فلا يمكن اعتراضها في الظروف العادية. على سبيل المثال، إذا اعترضنا مخططًا انسيابيًا، فسنحصل على شيء مثل هذا:

ويمكن ملاحظة أن خطوط المخطط الانسيابي لم يتم اعتراضها، أي أنه لم يتم اعتراض svg. الحل في هذا الوقت هو تحويل svg إلى قماش ثم التقاط لقطة شاشة وتحميل الكود مباشرة.

تهدف كل حلقة هنا إلى المرور عبر جميع علامات svg وتحويلها جميعًا إلى لوحة قماشية

 if (typeof html2canvas !== 'undef') { // ما يلي هو معالجة svg var nosToRecover = []; varNodesToRemove = []; (فهرس، عقدة) { varparentNode =node.parentNode var svg =node.outerHTML.trim(); var Canvas = document.createElement('canvas'); Canvas.width = 650; canvg(canvas, svg); .position; الطفل: العقدة });parentNode.removeChild(node);

هناك حاجة إلى ملف Canvg.js والملف التابع له rgbcolor.js هنا، ويمكن تنزيلهما مباشرة من الإنترنت أو استيرادهما مباشرة.

هذا في الواقع بسيط جدًا، لأنه شفاف بشكل افتراضي، هناك معلمة خلفية في html2canvas لإضافة لون الخلفية، كما يلي:

 html2canvas(cloneDom, { onrendered: function(canvas) { var url =canvas.toDataURL(image/png); }, الخلفية:#fafafa});

إذا تجاوزت div الواجهة، فقد تواجه مشكلة الاعتراض غير الكامل، كما هو موضح في الصورة أعلاه، هناك نصف المحتوى فقط، وذلك لأن الجزء غير المرئي مخفي، ولا يمكن لـ html2canvas اعتراضه دوم مخفي.

لذا فإن الحل في هذا الوقت هو استخدام الاستنساخ، ووضع نسخة من الجزء الذي يجب اعتراضه في أسفل الصفحة، ثم استخدام html2canvas لاعتراض القسم الكامل، وإزالة هذا الجزء من القسم المحتوى الكامل هو كما يلي:

 function showQRCode() { التمرير إلى (0, 0); // استنساخ العقدة، الافتراضي هو خطأ، أي أن سمات الطريقة لا يتم نسخها، والصحيح هو كل النسخ. var cloneDom = $(#d1).clone(true); // قم بتعيين سمة z-index للعقدة المستنسخة، طالما أنها أقل من العقدة المستنسخة. cloneDom.css({ لون الخلفية: #fafafa، الموضع: مطلق، الأعلى: 0px، مؤشر z: -1، الارتفاع: 798، العرض: 650 }); / فيما يلي معالجة svg varNodesToRecover = []; varNodesToRemove = []; cloneDom.find('svg');//divReport هو معرف dom الذي يجب اعتراضه في صورة svgElem.each(function (index,node) { varparentNode =Node.parentNode; var svg =node.outerHTML .trim(); var Canvas = document.createElement('canvas'); canvg(canvas, svg); .style.top }NodesToRecover.push({parent:parentNode,child:node });parentNode.removeChild(node); Canvas });parentNode.appendChild(canvas }); // إلحاق العقدة المستنسخة بالجسم ديناميكيًا. $(body).append(cloneDom); html2canvas(cloneDom, { onrendered: function(canvas) { var url =canvas.toDataURL(image/png); window.location.href = url ; cloneDom.remove(); // مسح المحتوى المستنسخ}، الخلفية:#fafafa });

هنا، قم أولاً باستنساخ div المراد اعتراضه وضبط مؤشر z على الحد الأدنى لتجنب التسبب في ظهور واجهة قبيحة، ثم تتم معالجة svg، والذي تم تحليله أعلاه، وأخيرًا، يتم إلحاق عقدة الاستنساخ بالجسم.

عند العرض، يمكننا استخدام location.href مباشرةً للانتقال لعرض الصورة أو حفظها أو كتابة عنوان url في ملف src الخاص بـ img وعرضه على الواجهة، مثل $('#imgId').attr('src) '، رابط)؛

وأخيرًا، يمكن عرض الصورة التي تم التقاطها للتو على الواجهة:

الآن بعد أن تم الحصول على عنوان URL، يجب تحميله إلى الواجهة الخلفية، وتخزينه في قاعدة البيانات، ثم تحميله في واجهة أخرى معروضة. أنا معتاد عمومًا على استخدام عنوان url لتخزين مسارات الصور بدلاً من تخزين البيانات الثنائية الكبيرة.

لأنني بحاجة إلى الحصول على الصورة في واجهة أخرى، قمت بتخزين الصورة في دليل الموارد على نفس مستوى تطبيق الويب، الكود كما يلي:

 // قم بتخزين الصورة وإرجاع مسار الصورة BASE64Decoder decoder = new BASE64Decoder(); byte[] b = decoder.decodeBuffer(product.getProPic().substring(data:image/png;base64,.length())); ByteArrayInputStream bais = new ByteArrayInputStream(b); url = user_resource + File.separator + img + File.separator + Product_+UUID.randomUUID().toString().replace(-, )+.png; String TotalUrl = System.getProperty(root) + url; new File(totalUrl); ImageIO.write(bi1, png, w2); // قم بتخزين المسار النسبي للصورة في قاعدة البيانات int res = ProductMapper.insertSelective(product);

نظرًا لوجود منطق آخر هنا، يتم تضمين جزء فقط من التعليمات البرمجية.

يتم استخدام BASE64Decoder هنا لتخزين الصور، بعد الحصول على الصورة، نحتاج إلى استخدام سلسلة فرعية لاعتراض محتوى البيانات:image/png;base64، لأن ما يلي هو عنوان url للصورة، url.substring(data:image/png;base64,.length()) .

بالنسبة للمسار، فإن عنوان url الموجود في الكود أعلاه هو المحتوى الذي قمت بتخزينه في قاعدة البيانات، وtotalUrl هو المسار الحقيقي المخزن أثناء عملية الكتابة الفعلية لـ ImageIO تم تكوينه في web.xml ويمكن استخدام المحتوى التالي، ثم System.getProperty(root).

 <!-- قم بتكوين النظام للحصول على الدليل الجذر للمشروع--><context-param> <param-name>webAppRootKey</param-name> <param-value>root</param-value></context-param ><listener > <listener-class> org.springframework.web.util.WebAppRootListener </listener-class></listener>

الآن يتم تخزين عنوان URL للصورة في قاعدة البيانات، ويتم تخزين الصورة نفسها في دليل المشروع ضمن Tomcat.

أخيرًا، للحصول عليه من الواجهة، ما عليك سوى إضافة اسم المشروع أمام عنوان url الحالي < img class =depot-img src =<%=request.getContextPath()%>/`+e.proPic+` > .

ثم يمكنك رؤية الصورة المعروضة على الواجهة:

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