<p>html2canvas: خطأ في العثور على DIV في المستند المنسوخ</p>

نفس المشكلة عندما أحاول تخزين اللوحة القماشية في التخزين المحلي والارتباط بصفحة أخرى باستخدام React.js

<Link to="/system">
            <button className="submitButton"  onClick={this.captureMap} >SUBMIT </button>
</Link>

   captureMap(){
      html2canvas(document.querySelector(".mapboxgl-canvas")).then(canvas => {
        // document.body.appendChild(canvas);
        var image = canvas;
        if(typeof localStorage !== "undefined"){
          localStorage.setItem('mapImg',image.toDataURL());
        }
      });
    }

تواجه نفس المشكلة
const mainDom = document.createElement ('div') ،
mainDom.appendChild (domElem [0] .cloneNode (صحيح)) ؛ // domElem هو كائن دوم

عندما نمرر mainDom إلى html2canvas يظهر الخطأ أدناه.

html2canvas: خطأ في العثور على DIV في المستند المنسوخ
demo.html # / Demo / Widget: 1 غير معلوم (في الوعد) خطأ في العثور على DIV في المستند المنسوخ

HarishSonar هل يمكنك من فضلك تكرار المشكلة على jsfiddle؟

تم إصلاح هذا الآن.
يبدو أننا لا نستطيع العمل مع dom ككائن في الذاكرة ، فهو يتطلب تصييرًا.
إضافة document.getElementsByTagName ('BODY') [0] .append (mainDom) ؛ حل مشكلتي.

كل ما علي فعله هو إزالة mainDom بمجرد معالجة html2canvas.

فقط للزوار في المستقبل ، لدي أيضًا نفس المشكلة.

انتهى بي الأمر باستنساخ عقدة DOM ، وإدخالها كأول طفل من document.body ، واستخدام أنماط CSS position: absolute; top: -16384px; width: ${originalElementWidth} . هذا مفيد إذا كنت بحاجة إلى إجراء تغييرات على عقدة DOM قبل التقاطها كلقطة شاشة.

أيضًا ، niklasvh ، إليك jsfiddle إذا كنت لا تزال ترغب في إلقاء نظرة: https://jsfiddle.net/bLwya8sf/1/

مرحبًا ، لقد قابلت هذه المشكلة أيضًا. وعندما أقوم بتشغيل وظيفة html2canvas ، يتم إرسال جميع الطلبات في مشروعي. هل يمكنك إخباري بالحل？ شكرًا جزيلاً. هذا هو الكود الخاص بي:
downBtn العام () {
var targetDom = document.querySelector ('# Box') ؛
var copyDom = targetDom.cloneNode (صواب) ،
document.body.appendChild (copyDom) ؛
html2canvas (copyDom). ثم (canvas => {
var imgData = canvas.toDataURL ('image / jpeg') ؛
var img = صورة جديدة () ؛
img.src = imgData ؛
img.onload = function () {
pdf.addImage (imgData، 'jpeg'، 0، 0، this.width * 0.225، this.height * 0.225) ؛
pdf.save ('pdf_2.pdf') ؛
} ؛
copyDom.remove () ،
}) ؛

نفس المشكلة هنا: اضطررت إلى تغليف SVG الخاص بي في div لتجنب هذه المشكلة ...

نفس المشكلة هنا: اضطررت إلى تغليف SVG الخاص بي في div لتجنب هذه المشكلة ...

هل يمكن الحديث عن كيفية القيام بذلك؟

تم إصلاح هذا الآن.
يبدو أننا لا نستطيع العمل مع dom ككائن في الذاكرة ، فهو يتطلب تصييرًا.
إضافة document.getElementsByTagName ('BODY') [0] .append (mainDom) ؛ حل مشكلتي.

كل ما علي فعله هو إزالة mainDom بمجرد معالجة html2canvas.

نعم ، يجب أن نعمل مع العنصر المُصَوَّر ، وليس العمل مع dom ككائن في الذاكرة

نفس المشكلة هنا: اضطررت إلى تغليف SVG الخاص بي في div لتجنب هذه المشكلة ...

هل يمكن الحديث عن كيفية القيام بذلك؟

بالتأكيد!
لقد قدمت مثالا هنا .
يعمل بشكل جيد في جميع المتصفحات باستثناء Internet Explorer 11: لا يعرض نهج html2canvas أي شيء في ملف PDF النهائي ... لا أعرف ما إذا كانت مشكلة html2canvas أو jsPDF ... أي تلميحات؟
شكرا لك

تم إصلاح هذا الآن.
يبدو أننا لا نستطيع العمل مع dom ككائن في الذاكرة ، فهو يتطلب تصييرًا.
إضافة document.getElementsByTagName ('BODY') [0] .append (mainDom) ؛ حل مشكلتي.
كل ما علي فعله هو إزالة mainDom بمجرد معالجة html2canvas.

نعم ، يجب أن نعمل مع العنصر المُصَوَّر ، وليس العمل مع dom ككائن في الذاكرة

لماذا لا تستخدم فقط رد الاتصال onclone؟ سيسمح لك هذا بالعمل مع documentClone قبل التقديم وإجراء تغييرات عليه.
على سبيل المثال ، لديك جدول قابل للتمرير ، مخطط جانت ، وتريد طباعة الجدول الكامل مع ظهور الصفوف المخفية في ملف PDF.

html2canvas(document.body, {
        onclone: function(documentClone) {
            // target elements you want to change on the "documentClone" object
        })
        .then(function(canvas) {
            // print canvas with e.g: jsPDF
        });
    };

لقد قمت بحل IE11 هنا .