Html2canvas: تُرجع صورة فارغة لأي عنصر عندما يزيد ارتفاع نص المستند عن 30،000 بكسل.

تم إنشاؤها على ٣١ مايو ٢٠١٦ · 16تعليقات · مصدر: niklasvh/html2canvas

تقوم المكتبة بإرجاع صورة فارغة عندما يزيد حجم نص المستند عن 30،000 بكسل. ستحاول التقاط عنصر 100 × 100. لكنك تحصل على صورة فارغة للعنصر على جسم طويل.

هنا كمان يوضح هذا الخطأ.

https://jsfiddle.net/fvo1xh8b/2/

يمكنك تغيير حجم الجسم أقل من 30000 وهو يعمل بشكل جيد.

Needs More Information

مصدر

charlie-lk

التعليق الأكثر فائدة

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

افتراضيًا الحد الأقصى للعرض / الارتفاع لمتطلبات المتصفح للوحات القماش
قسِّم وقهر باستخدام عناصر قماشية متعددة وأعد مصفوفة.
قم بإلقاء خطأ في وحدة التحكم لتقديم المشورة بشأن قيود اللوحة القماشية واقترح طرقًا لتنفيذه.

في حالتي ، أقوم باستنساخ الجسم بالكامل وقم فقط بتعيين الحد الأقصى للعرض / الارتفاع: html2canvas(el, {height: 3000, width: 3000}) .

toadkicker في ١٠ أكتوبر ٢٠١٨

👍9 ❤2 🎉2 👎1

ال 16 كومينتر

لدي نفس المشكلة بالضبط مثلك. هل وجدت أي حل لهذا؟

Sebastianvarv في ١٥ فبراير ٢٠١٧

http://stackoverflow.com/questions/37520013/html2canvas-returns-invalid-image-when-the-body-height-is-more-than-30000-pixels

charlie-lk في ١٥ فبراير ٢٠١٧

إيم ، لدي نفس المشكلة ، لكن في النهاية ، اكتشفت!
في حالتي ، هذا هو الحل الخاص بي:
ضع إطار iframe في عنصر جسدك ، مثل

<html>
  <head>
  #canvas_handler {
   position:absolute;
   left: -10000px;
  }
  </head>
  <body>
  <iframe id="canvas_handler" />
  </body>
</html>

وكل عنصر تريد تحويله إلى قماش ، يمكنك نسخه ووضعه في إطار iframe هذا ، واستخدام html2canvas ، ثم إزالته ، هكذا

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.appendChild(copy_ele);
canvas_handler.style.height = origin_ele.scrollHeight;
canvas_handler.style.width = origin_ele.scrollWidth;
html2canvas(copy_ele, {
      useCORS: true,
     }).then((canvas) => {
       // do your things
     });
canvas_handler.removeChild(table_ele);

netweng في ٢٥ أكتوبر ٢٠١٧

هل ما زالت هذه مشكلة في الإصدار 1.0.0 ؟ إذا كان الأمر كذلك ، هل يمكنك مشاركة مثال على jsfiddle .

niklasvh في ١٢ ديسمبر ٢٠١٧

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

no-response[bot] في ١٢ ديسمبر ٢٠١٧

مرحبًا عندما أحاول فحص إطار iframe بكاميرا IP داخلية ، فإنه يعيد صورة باطلة ، من فضلك هل يمكنك مساعدتي؟

AntonioDilorenzo في ٢١ أغسطس ٢٠١٨

افتراضيًا الحد الأقصى للعرض / الارتفاع لمتطلبات المتصفح للوحات القماش
قسِّم وقهر باستخدام عناصر قماشية متعددة وأعد مصفوفة.
قم بإلقاء خطأ في وحدة التحكم لتقديم المشورة بشأن قيود اللوحة القماشية واقترح طرقًا لتنفيذه.

في حالتي ، أقوم باستنساخ الجسم بالكامل وقم فقط بتعيين الحد الأقصى للعرض / الارتفاع: html2canvas(el, {height: 3000, width: 3000}) .

toadkicker في ١٠ أكتوبر ٢٠١٨

👍9 ❤2 🎉2 👎1

toadkicker أخي ، يمكنك حفظ كود / وظيفتي اليوم شكرا جزيلا

leandrosouza0786 في ٢٦ سبتمبر ٢٠١٩

toadkicker شكرا!

Liberateur في ٢٤ ديسمبر ٢٠١٩

إيم ، لدي نفس المشكلة ، لكن في النهاية ، اكتشفت!
في حالتي ، هذا هو الحل الخاص بي:
ضع إطار iframe في عنصر جسدك ، مثل
<html>
  <head>
  #canvas_handler {
   position:absolute;
   left: -10000px;
  }
  </head>
  <body>
  <iframe id="canvas_handler" />
  </body>
</html>
وكل عنصر تريد تحويله إلى قماش ، يمكنك نسخه ووضعه في إطار iframe هذا ، واستخدام html2canvas ، ثم إزالته ، هكذا
const copy_ele = origin_ele.cloneNode(true);
canvas_handler.appendChild(copy_ele);
canvas_handler.style.height = origin_ele.scrollHeight;
canvas_handler.style.width = origin_ele.scrollWidth;
html2canvas(copy_ele, {
      useCORS: true,
     }).then((canvas) => {
       // do your things
     });
canvas_handler.removeChild(table_ele);

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

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.contentDocument.body.appendChild(copy_ele);
canvas_handler.height = origin_ele.scrollHeight;
canvas_handler.width = origin_ele.scrollWidth;
html2canvas(canvas_handler.contentDocument.body, {
  useCORS: true,
}).then((canvas) => {
  // do your things
  canvas_handler.removeChild(copy_ele);
});

وإذا كنت تريد تطبيق نمط css الخاص بك كما هو الحال في المستند الحالي ، فستحتاج أيضًا إلى نسخ النمط إلى iframe:

// add style
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'your_style_file_url.css';
canvas_handler.contentDocument.head.appendChild(link);

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.contentDocument.body.appendChild(copy_ele);
canvas_handler.height = origin_ele.scrollHeight;
canvas_handler.width = origin_ele.scrollWidth;
html2canvas(canvas_handler.contentDocument.body, {
  useCORS: true,
}).then((canvas) => {
  // do your things
  canvas_handler.removeChild(copy_ele);
});

ricosmall في ١٦ مارس ٢٠٢٠

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

toadkicker في ١٦ مارس ٢٠٢٠

إيم ، لدي نفس المشكلة ، لكن في النهاية ، اكتشفت!
في حالتي ، هذا هو الحل الخاص بي:
ضع إطار iframe في عنصر جسدك ، مثل
<html>
  <head>
  #canvas_handler {
   position:absolute;
   left: -10000px;
  }
  </head>
  <body>
  <iframe id="canvas_handler" />
  </body>
</html>
وكل عنصر تريد تحويله إلى قماش ، يمكنك نسخه ووضعه في إطار iframe هذا ، واستخدام html2canvas ، ثم إزالته ، هكذا
const copy_ele = origin_ele.cloneNode(true);
canvas_handler.appendChild(copy_ele);
canvas_handler.style.height = origin_ele.scrollHeight;
canvas_handler.style.width = origin_ele.scrollWidth;
html2canvas(copy_ele, {
      useCORS: true,
     }).then((canvas) => {
       // do your things
     });
canvas_handler.removeChild(table_ele);
لقد جربت هذه الطريقة ، لكن لا تعمل بالضبط. في طريقي ، سأعمل مع الكود أدناه:
const copy_ele = origin_ele.cloneNode(true);
canvas_handler.contentDocument.body.appendChild(copy_ele);
canvas_handler.height = origin_ele.scrollHeight;
canvas_handler.width = origin_ele.scrollWidth;
html2canvas(canvas_handler.contentDocument.body, {
  useCORS: true,
}).then((canvas) => {
  // do your things
  canvas_handler.removeChild(copy_ele);
});
وإذا كنت تريد تطبيق نمط css الخاص بك كما هو الحال في المستند الحالي ، فستحتاج أيضًا إلى نسخ النمط إلى iframe:
// add style
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'your_style_file_url.css';
canvas_handler.contentDocument.head.appendChild(link);

const copy_ele = origin_ele.cloneNode(true);
canvas_handler.contentDocument.body.appendChild(copy_ele);
canvas_handler.height = origin_ele.scrollHeight;
canvas_handler.width = origin_ele.scrollWidth;
html2canvas(canvas_handler.contentDocument.body, {
  useCORS: true,
}).then((canvas) => {
  // do your things
  canvas_handler.removeChild(copy_ele);
});

في حالتي ، جميع العناصر هي svg أو نمط مضمّن ، لذلك لست بحاجة إلى إلحاق ورقة أنماط. ولكن نعم ، يجب إضافة ورقة الأنماط الخاصة بك إذا لزم الأمر

netweng في ٣٠ مارس ٢٠٢٠

لقد واجهت نفس المشكلة. كنت بحاجة لعمل صورة من النافذة المشروطة (بموضع ثابت). تلقيت دائما صورة بيضاء. كانت المشكلة في وضع التمرير. يعمل هذا الرمز بالنسبة لي:

const el = document.getElementById('html-to-canvas-area')
const area = el.getBoundingClientRect()
html2canvas(el, {
  scrollX: 0,
  scrollY: 0,
  width: area.width,
  height: area.height
})

invisor في ٢٤ سبتمبر ٢٠٢٠

🎉5 👍3 ❤1

عملت لي مثل السحر! شكرا على الحل الذكي!

flaviostutz في ٣٠ سبتمبر ٢٠٢٠

@ مستشار النجاة! هذا هو الشيء الوحيد الذي نجح معي.

MEGApixel23 في ٢٦ أكتوبر ٢٠٢٠

قد يكون هذا الخيار أيضًا حلاً لتمرير الحالات ذات الصلة

{
  scrollX: 0,
  scrollY: -window.scrollY
}

seahindeniz في ٩ نوفمبر ٢٠٢٠

❤2 🎉1

هل كانت هذه الصفحة مفيدة؟

0 / 5 - 0 التقييمات

القضايا ذات الصلة

عرض SVG مع css مضمن / خارجي لا يعمل

arzyu · 3تعليقات

لا يمكن التقاط موضع التمرير في 1.0.0-alpha.1

AlphaDu · 4تعليقات

الصورة لا تظهر في نافذة جديدة على كروم !!

ABHIKSINGHH · 3تعليقات

[Safari 10.1.2] لا يمكن عرض FontAwesome Icon في لوحة الرسم.

stevencherry1 · 3تعليقات

تكرار الخلفية لا يعمل

anthonymejia · 4تعليقات