Html2canvas: يعرض فقط ما يتم عرضه

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

تكرار محتمل من: https://github.com/niklasvh/html2canvas/issues/117

إذن ， أريد أن أعرف كيف يمكنني التقاط عنصر محدد؟ هل لدى أي شخص حل？

justein جرب هذا

<div id="test-case">Test-me</div>

html2canvas(document.getElementById("test-case")).then(function(canvas) {
    document.body.appendChild(canvas);
});

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

<div id="test-case">Test-me</div>

مرئي حاليًا في المتصفح ، فسيتم عرضه. إذا كانت خارج الشاشة ، فستكون اللوحة فارغة (ولكن بالحجم الصحيح). مرئي جزئيًا: معروض جزئيًا. لا يعمل المنجم مثل scrollHeight = 0 ، فهو يعرض كل ما هو مرئي عند تنفيذ الكود. (زر بلدي في الأسفل).

مثل تعليق btm ، أود أن أعرف كيف يتم ذلك على الموقع الإلكتروني النموذجي. هل يمكن الاعتماد على شيء ما في Angular أو Bootstrap للحصول على موارد خارج الشاشة؟

cchubb أنا لا أفهم ما علاقة Angle و Bootstrap بهذا. مشكلة جون ، تبدو لي مسألة تقديم عنصر معين.

إذا كنت تريد العرض الذي يقع خارج منفذ العرض ، فاستخدم فقط

html2canvas(document.body).then(function (canvas) {});

إذا كنت تريد عرض عناصر "overflow" ، فقم بإزالة "overflow" في وقت التشغيل وأضفها مرة أخرى بعد العملية باستخدام javascript لإضافة className ، على النحو التالي:

.no-scroll {
     overflow: visible !important;
}

#main {
     overflow: auto;
     height: 200px;
}

<div id="main">
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
</div>

document.getElementById("main").className = "no-scroll";
html2canvas(document.body).then(function (canvas) {
      document.getElementById("main").className = "";
});

أو قم فقط بتوجيه html2canvas لتصيير العنصر داخل العنصر بـ "overflow" ، على النحو التالي:

#parent {
     overflow: auto;
     height: 200px;
}

#child {
background-color: #fc0;
height: 600px;
}
<div id="parent">
<div id="main">
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
</div>
</div>

html2canvas(document.getElementById("main")).then(function (canvas) {});

حقًا لديه العديد من الاقتراحات للميزات غير الضرورية من وجهة نظري ، ما عليك سوى استهداف عناصر DOM الصحيحة واستخدام "CSS" لصالحهم.

اكتشفتها. قمت بإصلاحه في 0.5.0-alpha2. إذا استخدمت الإصدار 0.5.0-alpha1 ، فسيتم قصه ، لكن الإصدار alpha2 لا يفعل ذلك. لم ألاحظ حتى أن alpha2 كان متاحًا لأن صفحة الإصدارات كانت تركز على alpha1.

هذا كمان يوضح أنه يعمل الآن مع alpha2. https://jsfiddle.net/cchubb/fy7tw7ek/1/ إذا قمت بتغيير المورد الخارجي مرة أخرى إلى alpha1 ، فسيتم قصه عند النقر فوق الرابط السفلي. (تحتاج إلى حفظ ملف التنزيل بتنسيق png. لعرضه ، ولن تسمح لي العبارات بتغيير نافذة الإخراج href إلى بيانات.)

@ btm1 ، حاول الترقية إلى Alpha2.

cchubb سأعطي هذه لقطة.

cchubb ، تم إصلاح المشكلة الأساسية في alpha 2 وأنت على حق أنها مخفية جيدًا لم ألاحظ وجود alpha 2.

حسنًا ، بالنسبة لي ، حتى في alpha2 لا يزال يتم تقديم جزء العنصر "المرئي" في منفذ العرض فقط. راجع http://jsfiddle.net/NPC42/ykvL6a17/ للحصول على عرض توضيحي - يصدر html2canvas فقط تلك الصفوف التي تم تمريرها إلى منفذ العرض (بغض النظر عما إذا كانت مرئية في حاوية div التي تم تمريرها أم لا).

هل أسمي html2canvas خطأ بطريقة ما؟ عندما أختبرها على الكود الفعلي (وليس JSFiddle ، الذي أنشأته فقط للعرض التوضيحي) ، يساعد هذا الاقتراح في عرض العنصر بالكامل: https://github.com/niklasvh/html2canvas/issues/650 ، لكنني آمل لتجنب اختراق المكتبة.

NPC لن يعرض فقط ما هو غير مرئي بدون أن تفعل أي شيء عليك تغييره إلى تجاوز مرئي ---> تصدير بسرعة كبيرة ---> ثم قم بتغييره مرة أخرى للتمرير مرة أخرى وإلا فلن يعمل. ليس IMO مثاليًا أعتقد أنه يجب أن يكون هناك خيار لمجرد أنه يعمل ولكن على الأقل يعمل.

@ btm1 ، نعم ، أفترض أن هذا ليس هو الهدف ، نظرًا لأنني مررت في العنصر الموجود داخل العنصر الذي تم تمريره ، فإن العنصر نفسه لا يحتوي على أي تشذيب تجاوز.

في الوقت الحالي ، وجدت في تطبيقي أنني بحاجة إلى إعادة توصيل عنصري بالكامل بالجسم ، مع فرض عرض / ارتفاع معين عليه (نظرًا لأنه يحتوي على عناصر موضوعة تمامًا) ، وفي الوقت نفسه تغطي كل هذا المطبخ عن طريق ملء الشاشة "تحضير التصدير ، يُرجى الانتظار "overlay ، لأن html2canvas يستغرق أكثر من 10 ثوانٍ لعرضه بالكامل. بعد الانتهاء من التقديم - أرفقه مرة أخرى بالموقع الأصلي (داخل حاوية تم تمريرها) ، مع عدم ضبط العرض / الارتفاع.

مرهقة ، لكنها تعمل.

بشكل غريب ، يتم عرضه فقط من الحد العلوي المرئي حاليًا للعنصر المحدد.

جرب https://jsfiddle.net/bianjp/bpc3nq69/1/. مرر إلى "Print Screen" وانقر فوقه. لن تتضمن الصورة التي تم إنشاؤها سطورًا عليا غير مرئية عند النقر عليها.
باستخدام الإصدار 0.5.0.beta4.

الحل هو استدعاء $('html, body').scrollTop(0) (أو بأي طريقة أخرى لجعل الجزء العلوي من العنصر مرئيًا) قبل استدعاء html2canvas.

شكرا bianjp للإصلاح المقترح.

بشكل غريب ، يتم عرضه فقط من الحد العلوي المرئي حاليًا للعنصر المحدد.

هل هذا سلوك طبيعي .. يبدو غريبا جدا بالنسبة لي!

+1

هذه الإجابة عملت بالنسبة لي.

قبل استدعاء html2canvas ، مرر العنصر الذي تريد عرضه في منفذ العرض.

const el = document.querySelector('#test')
el.scrollIntoView()
setTimeout(function () {
  html2canvas(el, {
    onrendered: function (canvas) {
      document.body.appendChild(canvas)
    },
    useCORS: true
  })
}, 10)

إنه يعمل بالنسبة لي.
باستخدام الإصدار 0.5.0-beta4.

هل ما زالت هذه مشكلة مع v1.0.0 ؟ إذا كان الأمر كذلك ، هل يمكنك مشاركة مثال على jsfiddle .

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

مرحبًا ، niklashvh

كنت أواجه أيضًا مشكلة التقاط لقطة مرئية فقط لـ DOM. لدي الإصدار 0.5.0-beta4
لذا ، أنا أتفق مع حل ziyoung . فعلت نفس الشيء كما اقترح.

           `$('html,body').scrollTop(0);

     html2canvas( $("#rectangular_div"), {
         useCORS: true,
         dpi: 200,

          onrendered:function(canvas) {

              var str = canvas.toDataURL("image/png");
              var contentType = 'image/png';
              console.log(str);
              b64Data =str;
              imgFrameSave();
          }
        })`

لذلك ، قمت بتعيين موضع div في أعلى 0 على الجسم ثم اتصلت بـ html2canvas. بناءً على تجربتي ، أوصيت باستخدام الإصدار 0.5.0-beta4 بواسطة eKoopmans حتى تتمكن من تجنب مشكلة pix-elation وكذلك التقاط صورة كاملة من DOM.

يعمل هذا على سطح المكتب ولكنه لا يعمل على الهاتف المحمول

ما فعلته هو window.scrolTo(0,0) قبل استدعاء htmltocanvas () ، إذا كنت في أعلى الشاشة تتم طباعة div بالكامل