<p>لا يعمل html2canvas عندما يحتوي html على عنصر canvas</p>

تم إنشاؤها على ١٣ ديسمبر ٢٠١٧  ·  29تعليقات  ·  مصدر: niklasvh/html2canvas

تقارير الأخطاء:

أنا أستخدم html2canvas في مشروع رد فعل. وجدت أن html2canvas لا يعمل عندما يحتوي html على عنصر canvas. ستظهر منطقة اللوحة فارغة.

مواصفات:

هذه هي صورة html
image

هذا هو التحويل إلى صورة قماشية

image

في منطقة اللوحة القماشية ، أستخدم "echarts-for-response" لرسم خريطة الرادار。 لكن عندما أقوم بالنقر فوق زر إنشاء الصور ، لا تكتمل صورة التنزيل

  • تم اختبار إصدار html2canvas باستخدام: 1.0.0-alpha.4
  • المتصفح والإصدار: Chrome 60.0.3112.7
  • نظام التشغيل: windows
Bug

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

لقد حاولت إضافة removeContainer: false ، لكن المشكلة لا تزال موجودة على Chrome للجوال

ال 29 كومينتر

لدي نفس المشكلة.

هل يمكنك مشاركة مثال على jsfiddle؟

نفس المشكلة. لدي رسوم بيانية على الصفحة ، لم تعد تُعرض. تستخدم لتقديم في الإصدار السابق

لقد صنعت كمانًا لإظهار المشكلة
https://jsfiddle.net/outerbound/v7p71wzr/

هذا لا يعمل على الكروم :( ، يمكنني أن أؤكد في Safari أنه يعمل :)

تكمن المشكلة في إزالة نموذج الحاوية DOM قبل العرض

لدي نفس المشكلة. علامة...

ربما لا يمكن أن يعمل html2canvas مع

واجهت نفس المشكلة في استخدام chart.js مع vue (vue-chart.js) وهذا يحدث فقط في Chrome

لدي نفس المشكلة ، لا يمكن لـ html2canvas العمل مع gridstack.js ، عندما أستخدم html2canvans مع مجموعة الشبكة ، تتكدس جميع العناصر في الأعلى.
image

@ Nemo0915 أقوم ببناء jsfiddle مع gridstack.js ، لكنها تعمل بشكل جيد. لذا ربما هذه ليست مشكلة gridstack.js ، لكنني لست متأكدًا تمامًا.

نفس المشكلة ، فايرفوكس على ما يرام ولكن Chorme لا يمكن أن يعمل

bigfacewo شكرًا
image

@ Nemo0915 لقد وجدت أن الإصدار 0.5.0-beta4 يعمل بشكل طبيعي ، jsfiddle . لقطة الشاشة هي:
qq 20171220150328
الإصدار 1.0.0-alpha4 ، jsfiddle ، لا يمكن أن يعمل على الكروم ، لكنني لم أجد مشكلة أن العناصر مكدسة في الأعلى. هذه هي لقطة الشاشة على Firefox:
qq 20171220150946

إصدار Chrome: 63.0.3239.108
إصدار Firefox: 57.0.2

يمكنك إضافة خيار: removeContainer: false لإصلاح هذه المشكلة مؤقتًا ....

شكرًا IxAres ، إنه يحل مشكلتي.

لقد حاولت إضافة removeContainer: false ، لكن المشكلة لا تزال موجودة على Chrome للجوال

niklasvh لا يعمل على الإطلاق. أنا أستخدم الإصدار 1.0.0-rc.5 من هذا التطبيق.
Screenshot 2020-02-17 at 10 54 42 AM

مهلا ، ما الحل؟

2020 لا تزال المشكلة هنا.

+1 أرى هذا السلوك أيضًا.

لا تزال المشكلة قائمة

لا تزال المشكلة قائمة في Chart.js ومتصفح Firefox 76.0 (64 بت)

مرحبًا ، أواجه نفس المشكلة مع Mapbox داخل العنصر ، هل يمكنك المساعدة هنا.
لقد حاولت أيضًا إزالةContainer: false لكنها لم تنجح معي.

Rajeshgtstpl لدي مشكلة مماثلة مع mapbox. لقد قمت بحلها عن طريق تعيين preserveDrawingBuffer: true في خيارات mapbox.

لا أستخدم Chart.js ، لكنني واجهت نفس المشكلة مع اللوحات التي استخدمت فيها drawImage. تم حل المشكلة بوضع image.crossOrigin = 'مجهول' على عنصر الصورة قبل تمريرها إلى drawImage ، مثل هذا:

image.crossOrigin = 'anonymous'

آمل أن يساعد شخص ما :)

مرحبًا يا شباب ، أواجه مشكلة تصدير قماش مماثلة ولكن مع مشهد ثلاثي js ، هل هناك توصيات؟ لقد جربت الإصدار 1.0.0-rc.7 ولكنه يصدر كل شيء ما عدا قماش threejs.

تحرير: حاولت أن أضيف في لوحة threejs مثل هذا:

image

لكن حصلت على هذا الخطأ:

image

AchoArnold preserveDrawingBuffer: true عملت معي في Mapbox ، شكرًا.

سؤال: هل لاحظت أي تأثير على الأداء؟

لا أستخدم Chart.js ، لكنني واجهت نفس المشكلة مع اللوحات التي استخدمت فيها drawImage. تم حل المشكلة بوضع image.crossOrigin = 'مجهول' على عنصر الصورة قبل تمريرها إلى drawImage ، مثل هذا:

image.crossOrigin = 'anonymous'

آمل أن يساعد شخص ما :)

لقد أنقذت حياتي شكرا

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات

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

Loki180 picture Loki180  ·  4تعليقات

arzyu picture arzyu  ·  3تعليقات

koreanman picture koreanman  ·  4تعليقات

anthonymejia picture anthonymejia  ·  4تعليقات

kunal886496 picture kunal886496  ·  3تعليقات