<p>لا يعرض html2canvas الصور الموجودة في العنصر</p>

أهلا.
أنا عندي نفس المشكلة بالضبط.

نفس المشكلة هنا.
أحاول الحصول على لقطة تغريدة ، ولا تظهر الصورة المرفقة.
الصورة المرفقة.

أعتقد أن الصور من المواقع الأخرى يتم حظرها افتراضيًا لأنها "تلوث لوحة HTML5". إليك الخيار الذي تحتاج إلى استخدامه عند استدعاء العارض:

السمة: allowTaint
النوع: منطقي
الافتراضي: خطأ
الوصف: ما إذا كان سيتم السماح للصور عبر الأصل بتشويه اللوحة القماشية

تم العثور عليها هنا: https://html2canvas.hertzen.com/documentation.html.

نفس المشكلة....
وصوري قادمة من نفس المنشأ

لقد واجهت نفس المشكلة ، وأفضل طريقة لحل المشكلة هي تشغيل المشروع على الخادم والاطلاع على النتيجة.
في حالتي ، كنت أقوم سابقًا بتشغيل ملفات html مباشرة بدون أي خادم ، ولكن بعد ذلك بعد البحث على Google قليلاً ، حصلت على حل لتجربته على الخادم.
لقد جربت مشروعي باستخدام Visual Studio وكان يعمل بشكل مثالي ، كما تم نسخ صوري داخل علامة div

أدخل خيار allowTaint لعرض جميع الصور في لقطة الشاشة الخاصة بك

html2canvas(document.getElementById('invoice-panel'), { letterRendering: 1, allowTaint : true, onrendered : function (canvas) { } });

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

نفس المشكلة شكرا على الحل.

لا يحول html2canvas الصور المعطاة src بتنسيق base64. لقد طبعت السجل. رجاء، المساعده

1283ms html2canvas: المستند مستنسخ html2canvas.js: 1487
3936ms html2canvas: عارض Canvas الذي تمت تهيئته بحجم 601 x 965 html2canvas.js: 1487
3937ms html2canvas: بدء تشغيل NodeParser html2canvas.js: 1487
4014ms html2canvas: العقد التي تم جلبها ، المجموع: 10 html2canvas.js: 1487
4015ms html2canvas: حساب مقاطع الفائض html2canvas.js: 1487
4034ms html2canvas: ابدأ في جلب الصور html2canvas.js: 1487
4044ms html2canvas: تمت إضافة بيانات الصورة رقم 1: image / jpeg؛ base64 ، / 9j / 4AAQSkZJRgABAQAAAQABAAD / 2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pL html2vas.js: 1487
4047ms html2canvas: الصورة المضافة # 2 data: image / jpeg؛ base64 ، / 9j / 4AAQSkZJRgABAQAAAQABAAD / 2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHhtml2 14canvas.j8UHRofHh0aHhtml2 14canvas.j
4051ms html2canvas: انتهى البحث عن الصور html2canvas.js: 1487
4052ms html2canvas: الصورة المحملة بنجاح # 1
حاوية الصورة {src: " data: image / jpeg؛ base64 ، / 9j / 4AAQSkZJRgABAQAAAQABAAD… AKKKKACiiigAooooAKKKKKACiiigAooooAKKKKKACiiigD / 2Q ==" ، الصورة: img ، ملطخة: فارغة ، وعد: h}
html2canvas.js: 1487
4056ms html2canvas: الصورة المحملة بنجاح # 2
حاوية الصورة {src: " data: image / jpeg؛ base64 ، / 9j / 4AAQSkZJRgABAQAAAQABAAD… 4PXOaUMB0 / GlrcdiYtkcc / WkzjqfwqMPxzxRvAz3oSCx // 9k ="، image: img، tainted: null
html2canvas.js: 1487
4059ms html2canvas: تم تحميل الصور ، وبدء التحليل اللغوي html2canvas.js: 1487
4060ms html2canvas: تكوين سياقات التراص html2canvas.js: 1487
4064ms html2canvas: فرز سياقات التراص html2canvas.js: 1487
4066ms html2canvas: إنشاء قائمة انتظار مكونة من 9 عناصر html2canvas.js: 1487
4104ms html2canvas: الانتهاء من التصيير html2canvas.js: 1487
4109ms html2canvas: قص القماش في: اليسار: 28 أعلى: 529 العرض: 545 ارتفاع: 0 html2canvas.js: 1487
4111ms html2canvas: المحصول الناتج بعرض 545 وارتفاع 0 مع x 28 و y 529

لا يقوم html2canvs بعرض الصور المقدمة مع base64 src ، فلن تعود المكالمة إلى "onrendered"
وظيفة. رجاء، المساعده

1283ms html2canvas: المستند مستنسخ html2canvas.js: 1487
3936ms html2canvas: عارض Canvas الذي تمت تهيئته بحجم 601 x 965 html2canvas.js: 1487
3937ms html2canvas: بدء تشغيل NodeParser html2canvas.js: 1487
4014ms html2canvas: العقد التي تم جلبها ، المجموع: 10 html2canvas.js: 1487
4015ms html2canvas: حساب مقاطع الفائض html2canvas.js: 1487
4034ms html2canvas: ابدأ في جلب الصور html2canvas.js: 1487
4044ms html2canvas: تمت إضافة بيانات الصورة رقم 1: image / jpeg؛ base64 ، / 9j / 4AAQSkZJRgABAQAAAQABAAD / 2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pL html2vas.js: 1487
4047ms html2canvas: الصورة المضافة # 2 data: image / jpeg؛ base64 ، / 9j / 4AAQSkZJRgABAQAAAQABAAD / 2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHhtml2 14canvas.j8UHRofHh0aHhtml2 14canvas.j
4051ms html2canvas: انتهى البحث عن الصور html2canvas.js: 1487
4052ms html2canvas: الصورة المحملة بنجاح # 1
حاوية الصورة {src: " data: image / jpeg؛ base64 ، / 9j / 4AAQSkZJRgABAQAAAQABAAD… AKKKKACiiigAooooAKKKKKACiiigAooooAKKKKKACiiigD / 2Q ==" ، الصورة: img ، ملطخة: فارغة ، وعد: h}
html2canvas.js: 1487
4056ms html2canvas: الصورة المحملة بنجاح # 2
حاوية الصورة {src: " data: image / jpeg؛ base64 ، / 9j / 4AAQSkZJRgABAQAAAQABAAD… 4PXOaUMB0 / GlrcdiYtkcc / WkzjqfwqMPxzxRvAz3oSCx // 9k ="، image: img، tainted: null
html2canvas.js: 1487
4059ms html2canvas: تم تحميل الصور ، وبدء التحليل اللغوي html2canvas.js: 1487
4060ms html2canvas: تكوين سياقات التراص html2canvas.js: 1487
4064ms html2canvas: فرز سياقات التراص html2canvas.js: 1487
4066ms html2canvas: إنشاء قائمة انتظار مكونة من 9 عناصر html2canvas.js: 1487
4104ms html2canvas: الانتهاء من التصيير html2canvas.js: 1487
4109ms html2canvas: قص القماش في: اليسار: 28 أعلى: 529 العرض: 545 ارتفاع: 0 html2canvas.js: 1487
4111ms html2canvas: المحصول الناتج بعرض 545 وارتفاع 0 مع x 28 و y 529

SebasAlvarez - لم يعد خيار allowTaint يعمل. هل ما زالت تعمل من أجلك؟

SebasAlvarez ، sandeepnagra :
أنا أستخدم هذا الرمز للحصول على لقطة شاشة للصورة في علامة تبويب جديدة ولكن لا يتم عرض الصورة ، كما أنني تعبت من "a llowTaint: true " ، إنه يعمل فقط داخل نفس النافذة ولكن ليس في علامة تبويب جديدة.
هذا هو الكود الخاص بي:
عرض الوظيفة () {
html2canvas (document.body، {allowTaint: true،
onrendered: الوظيفة (قماش) {
document.body.appendChild (قماش) ؛
window.open (canvas.toDataURL ()) ؛
}
}) ؛
}
هل يمكن أن تخبرني ما هي المشكلة ، كيف يمكنك إصلاح هذه المشكلة ؟؟

venkateshduddu - هل تقوم بتحويل التركيز إلى علامة تبويب جديدة أولاً قبل التقاط لقطة الشاشة؟

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

venkateshduddu - لن يؤدي حدث النقر إلى تحويل التركيز إلى علامة تبويب جديدة تلقائيًا ، عليك تشغيل ذلك. لذا جرب ذلك أولاً ، أنا متأكد بنسبة 100٪ أنه سيحل مشكلتك.

فيما يتعلق بمسار الخادم ، هل تمت مصادقة محرك أقراص الشبكة هذا؟ إذا كانت الإجابة بنعم ، فهل تقوم بالمصادقة قبل تحميل الملفات على محرك أقراص الشبكة؟ إنها قصة مختلفة تمامًا إذا كنت تريد تحميلها إلى S3 bucket.

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

إذا استخدمت allowTaint ، فلن يعمل خيار التنزيل. الرجاء المساعدة

نفس المشكلة....
وصوري قادمة من نفس المنشأ

لقد أصلحت هذه المشكلة للتو.
الرجاء تمكين الخيار "useCORS" إلى "true"
الرموز أدناه:
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

شكرًا جزيلاً لك Sotyoyo ، تم إصلاح الخطأ الخاص بي بالرمز أعلاه. شكرا شكرا

Sotyoyo شكرا جزيلا يا أخي ، بارك الله فيك <3

Sotyoyo شكرا جزيلا لك ، هذا العمل بالنسبة لي :)

لا يتم عرض الصورة ، هل هناك أي مشكلة في الكود الخاص بي؟

html2canvas (document.getElementById ("html-2-pdfwrapper")، {
التسجيل: صحيح ،
التقديم: 1 ،
allowTaint: خطأ ،
useCORS: صحيح ،
onrendered: الوظيفة (قماش) {
var img = canvas.toDataURL ('image / png') ؛
var doc = new jsPDF () ؛
doc.addImage (img، 'JPEG'، 20، 20) ؛
doc.save ('test2.pdf') ؛
}
}) ؛

نفس المشكلة....
وصوري قادمة من نفس المنشأ

لقد أصلحت هذه المشكلة للتو.
الرجاء تمكين الخيار "useCORS" إلى "true"
الرموز أدناه:
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

إنه عمل! شكرا!

نفس المشكلة....
وصوري قادمة من نفس المنشأ

لقد أصلحت هذه المشكلة للتو.
الرجاء تمكين الخيار "useCORS" إلى "true"
الرموز أدناه:
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

هذا صحيح /

html2canvas (document.querySelector ("# id-of-element")، {logging: true، letterRendering: 1، allowTaint: false، useCORS: true}). ثم (canvas => {
var imgData = canvas.toDataURL ('image / jpeg') ؛
}) ؛

أدخل خيار allowTaint لعرض جميع الصور في لقطة الشاشة الخاصة بك

html2canvas(document.getElementById('invoice-panel'), { letterRendering: 1, allowTaint : true, onrendered : function (canvas) { } });

شكرا. أنه يعمل بشكل جيد.

لكن لا يمكنني استنساخ نمط الصورة على القماش

ما زلت أواجه نفس المشكلة حتى بعد استخدام الخيارات المذكورة أعلاه هو الكود الخاص بي.
var element = document.querySelector ("# map-image-id") ؛
html2canvas (عنصر ، {
التسجيل: صحيح ،
التقديم: 1 ،
allowTaint: خطأ ،
useCORS: صحيح
}). ثم (canvasElm => {
var imageType = "image / png" ؛
var imageData = canvasElm.toDataURL (imageType) ،
var src = encodeURI (imageData) ؛
console.log ("src"، src)؛
console.log ("بيانات الصورة" ، imageData) ؛

ما زلت أواجه نفس المشكلة حتى بعد استخدام الخيارات المذكورة أعلاه هو الكود الخاص بي.
var element = document.querySelector ("# map-image-id") ؛
html2canvas (عنصر ، {
التسجيل: صحيح ،
التقديم: 1 ،
allowTaint: خطأ ،
useCORS: صحيح
}). ثم (canvasElm => {
var imageType = "image / png" ؛
var imageData = canvasElm.toDataURL (imageType) ،
var src = encodeURI (imageData) ؛
console.log ("src"، src)؛
console.log ("بيانات الصورة" ، imageData) ؛

ولك مثله. هل قمت بحلها؟

ما زلت أواجه نفس المشكلة حتى بعد استخدام الخيارات المذكورة أعلاه هو الكود الخاص بي.
var element = document.querySelector ("# map-image-id") ؛
html2canvas (عنصر ، {
التسجيل: صحيح ،
التقديم: 1 ،
allowTaint: خطأ ،
useCORS: صحيح
}). ثم (canvasElm => {
var imageType = "image / png" ؛
var imageData = canvasElm.toDataURL (imageType) ،
var src = encodeURI (imageData) ؛
console.log ("src"، src)؛
console.log ("بيانات الصورة" ، imageData) ؛

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

أرى نفس المشكلة. ما الخطأ الذي افعله؟

html2canvas(document.getElementById(<id>), {
    logging: true,
    letterRendering: 1,
    allowTaint: false,
    useCORS: true
}).then(result => {
    var img = result.toDataURL("image/png");
    savePng(img);
});

يعمل ما يلي أيضًا إذا كنت تريد تضمين <img src-"..." /> :

html2canvas(report, {letterRendering: 1, allowTaint: true, useCORS: true})
            .then((canvas) => {      
                const imgData = canvas.toDataURL('image/png');
               // const pdf = new jsPDF();
               // pdf.addImage(imgData, 'PNG', 10, 10);
                //pdf.save("foo.pdf");  
            });

يحتوي المحتوى الخاص بي على صورة مأخوذة من Aws.s3 (). التعليقات المذكورة أعلاه لا تعمل من أجل حالتي.

html2canvas (content، {letterRendering: 1، allowTaint: false، useCORS: true})
ثم (قماش => {
const imgData = canvas.toDataURL ('image / png') ؛
console.log (imgData) ؛
const pdf = جديد jsPDF () ؛
pdf.addImage (imgData، 'PNG'، 10، 10، canvas.width، canvas.height) ؛
pdf.save ('download.pdf') ؛
}) ؛

تحتوي لوحة الإخراج على مربع فارغ فقط بدلاً من الصورة. أي واحد لديه حل لقضيتي؟

يحتوي المحتوى الخاص بي على صورة مأخوذة من Aws.s3 (). التعليقات المذكورة أعلاه لا تعمل من أجل حالتي.

html2canvas (content، {letterRendering: 1، allowTaint: false، useCORS: true})
ثم (قماش => {
const imgData = canvas.toDataURL ('image / png') ؛
console.log (imgData) ؛
const pdf = جديد jsPDF () ؛
pdf.addImage (imgData، 'PNG'، 10، 10، canvas.width، canvas.height) ؛
pdf.save ('download.pdf') ؛
}) ؛

تحتوي لوحة الإخراج على مربع فارغ فقط بدلاً من الصورة. أي واحد لديه حل لقضيتي؟

نفس المشكلة هنا. الصور القادمة من حاوية S3

نفس المشكلة....
وصوري قادمة من نفس المنشأ

لقد أصلحت هذه المشكلة للتو.
الرجاء تمكين الخيار "useCORS" إلى "true"
الرموز أدناه:
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

شكرا
إنه يعمل بالنسبة لي ❤❤

تم حظر الوصول إلى الصورة على ' https: // image / logo link' من الأصل ' http: // localhost : 3000' بواسطة سياسة CORS: لا يوجد رأس 'Access-Control-Allow-Origin' موجود على المورد المطلوب.
هل هذا هو سبب عدم ظهور شعاري في ملف pdf.
ضع كل النص مع تطبيق css وشعار العلامة التجارية الموجود في مجلدي الثابت سيبدأ.
الرجاء الإجابة بحاجة إلى مساعدة في هذا الأمر ، فأنا أحاول ذلك منذ أكثر من أسبوعين.

بالنسبة لأي شخص قادم إلى هنا ، بعد تجربة العديد من الأشياء ، اكتشفت أنه للحصول على صور من مصادر خارجية (مثل حاوية S3) ، يجب عليك تمكين كل من useCORS = true لـ html2canvas ، وتمكين سياسة CORS على الصور المعروضة من S3.

لقد قمت بحلها باستخدام وكيل html2canvas. يمكنك الاطلاع على بعض التفاصيل حول الاستخدام والاختبار هنا:
https://github.com/zeusstl/html2canvas-proxy-nodejs