Html2canvas: يتعذر الحصول على محتويات divs باستخدام "display: none"
مرحبًا ، أريد التقاط لقطة شاشة لمقطع div مخفي
هذا هو الكود الذي جربته
لغة البرمجة:
<div` id="visible">
hello there!!
</div>
<div id="hidden" style="display:none">
You can't see me :P
</div>
شبيبة:
var elem1=$("#hidden");
if(!elem1.is(":visible"))
{
elem1.show();elem1.fadeIn(1);elem1.fadeOut(1);
}
html2canvas(elem1).then(function(canvas){
$("body").append(canvas);
});
خطأ في المستعرض:
**
خطأ في النوع غير معلوم: لا يمكن قراءة الخاصية "length" لـ nullhtml2canvas @ html2canvas.js: 941 (دالة مجهولة) @ HtmlPage. أتش تي أم أل: 13
**
كمانتي: https : //jsfiddle.net/h39tp0Ly/2/
الرجاء مساعدتي في هذا
Spartan-Arun
ال 10 كومينتر
يفسر Html2canvas العرض: لا يوجد نمط بشكل صحيح وبالتالي لن يعرض عنصرًا مخفيًا. لتحقيق ما تريده ، يمكنك وضع عنصر مرئي خارج إطار عرض الصفحة (إذا كنت ترغب في "تقديم عنصر مخفي").
herringtown
في ١١ مارس ٢٠١٦
ربما يكون مفيدا.
شكرا !
atefBB
في ٢٧ سبتمبر ٢٠١٦
وهي تعمل فقط إذا وفقط إذا كان لدى div ملف css ليس " display: none ". لذلك استخدمت تركيبة .show () و .hide () لجعل العنصر مرئيًا ومخفيًا لتشكيل Canvas
Spartan-Arun
في ٤ يناير ٢٠١٧
onclone: function(document) {
hiddenDiv = document.getElementById("render");
hiddenDiv.style.display = 'block';
}
لقد وجدت بعض المعلومات على الإنترنت. يمكننا ضبط css على div المحدد باستخدام " display: none " ثم إضافة خيار عند النسخ كما هو مذكور أعلاه. الرجاء إضافة خيار "loggin: صحيح" لمعرفة ما سيحدث
karsondang
في ٢٣ يناير ٢٠١٧
في الواقع ، الحيلة المتمثلة في إخراج الحاوية من منفذ العرض بقيم مطلقة للموضع وقيم سالبة أعلى / يسار - لا تعمل في Firefox ، فهي تطرح استثناء NS_ERROR_FAILURE
إنه يعمل على الرغم من Chrome
nettiopsu
في ١٤ فبراير ٢٠١٨
لقد واجهت هذه المشكلة مؤخرًا ، وإذا كنت تريد أن يكون عنصر div معينًا غير مرئي ولقطات الشاشة ، فقم بتعيين خصائص css على أنها
height: 0%
overflow:hidden
kchen1025
في ٧ يونيو ٢٠١٨
هذا لا يعمل بالنسبة لي @ kchen1025
chidiwilliams
في ١٤ يوليو ٢٠١٨
انتهى بي الأمر بإنشاء اللوحة القماشية فورًا بعد div الهدف ، ثم إخفاء div فورًا بعد تحميل اللوحة القماشية. الوميض بالكاد ملحوظ.
يبدو الرمز الخاص بي كما يلي:
<div id="capture">
...
</div>
<div id="end"></div>
html2canvas(document.querySelector("#capture")).then(canvas => {
$("#end").append(canvas)
$("#capture").hide()
});
مرحبًا ، أنا أعمل مع Angular 6 و "html2canvas" لإنشاء ملف PDF باستخدام "jsPdf" .... أردت التقاط لقطة شاشة لملف div مخفي ولم أتمكن من القيام بذلك حتى أحقق ذلك
يتم الالتقاط على div بالمعرف "html-pdf"
"لغة البرمجة"
بطاقة الطالب / أ>
div id = "pdf" * ngIf = "test" style = "text-align: center؛ margin-top: 5px؛">
div id = "html-pdf">
/ شعبة
/ div`
"js أو في الزاوية هي منقوصة"
`download2 () {
var imgcab: سلسلة ؛
imgcab = this.base64logo.trim () ؛
html2canvas (document.getElementById ('html-pdf')، {scale: 2}). ثم (الوظيفة (قماش) {
var img = canvas.toDataURL ("image / png"، 1) ؛
var doc = jsPDF جديد ({
الاتجاه: "p" ،
الوحدة: مم ،
التنسيق: "حرف" ،
}) ؛
doc.addImage (img، 'PNG'، 2،2،212،272) ؛
doc.addImage (imgcab، 'JPEG'، 5، 5،30،30) ؛
doc.save ('testCanvas.pdf') ؛
}) ؛ `
وأهم شيء إخفاء div داخل الشاشة.
"CSS"
#pdf {
overflow: hidden;
height: 0;
}
يقوم الكود بإنشاء ملف pdf مع التقاط div "html-pdf" الموجود داخل div المخفي "pdf" ...
أتمنى أن تخدمهم
كتبت هذا باللغة الاسبانية ومترجم من تشيلي.
kuraudeo
في ٢٧ يوليو ٢٠١٨
أعتقد أن الطريقة الصحيحة للقيام بالمهمة هي استخدام خاصية onclone ، https://stackoverflow.com/a/51049443/2251303
gamesover
في ٢٥ يوليو ٢٠١٩
القضايا ذات الصلة
dking3876
·
4تعليقات
ABHIKSINGHH
·
3تعليقات
kunal886496
·
3تعليقات
tjchambers32
·
3تعليقات
diego-rey
·
3تعليقات
التعليق الأكثر فائدة
مرحبًا ، أنا أعمل مع Angular 6 و "html2canvas" لإنشاء ملف PDF باستخدام "jsPdf" .... أردت التقاط لقطة شاشة لملف div مخفي ولم أتمكن من القيام بذلك حتى أحقق ذلك
يتم الالتقاط على div بالمعرف "html-pdf"
"لغة البرمجة"
بطاقة الطالب / أ>
div id = "pdf" * ngIf = "test" style = "text-align: center؛ margin-top: 5px؛">
div id = "html-pdf">
/ شعبة
/ div`
"js أو في الزاوية هي منقوصة"
`download2 () {
var imgcab: سلسلة ؛
imgcab = this.base64logo.trim () ؛
html2canvas (document.getElementById ('html-pdf')، {scale: 2}). ثم (الوظيفة (قماش) {
var img = canvas.toDataURL ("image / png"، 1) ؛
var doc = jsPDF جديد ({
الاتجاه: "p" ،
الوحدة: مم ،
التنسيق: "حرف" ،
}) ؛
doc.addImage (img، 'PNG'، 2،2،212،272) ؛
doc.addImage (imgcab، 'JPEG'، 5، 5،30،30) ؛
doc.save ('testCanvas.pdf') ؛
}) ؛ `
وأهم شيء إخفاء div داخل الشاشة.
"CSS"
#pdf { overflow: hidden; height: 0; }يقوم الكود بإنشاء ملف pdf مع التقاط div "html-pdf" الموجود داخل div المخفي "pdf" ...
أتمنى أن تخدمهم
كتبت هذا باللغة الاسبانية ومترجم من تشيلي.