Html2canvas: مشاكل مع صور الخلفية

يبدو أنه ثابت بـ 0.4.1 (في تطوير الفرع). ربما تتعلق بالرقم 256 #

هل يمكنك تجربة 0.4.1 ومعرفة ما إذا كانت المشكلة لا تزال قائمة؟

أهلا. أنا عندي نفس المشكلة بالضبط. نعم ، لا تزال المشكلة موجودة في 0.4.1. شكرا لجميع التعليمات.

أواجه نفس المشكلة ... هل من حل حتى الآن؟ شكرا نيكلاس على هذا السيناريو الرائع.

لن يتم عرض هذا الرمز.
div class = "mc-image" title = "" style = "background- image: url ('http://eterni-t.design.s3.amazonaws.com/381/theme-154-original-1.jpg' ) ؛ العرض: 1025 بكسل ؛ الارتفاع: 780 بكسل ؛ مؤشر z: 9999 بوصة

لقد لاحظت أنه إذا قمت بإزالة حجم الخلفية: الغلاف ؛ من صفي = "mc-image" يعمل.

@ ymorin007 هل أحدث الالتزام (أي أنشأت البرنامج النصي بنفسك)؟

Windows7 إصدار Chrome 30.0.1599.101 م

إصلاح درجة الحرارة:

تغيير السطر 2818 إلى

ctx.fillStyle = (options.background !== undefined) ? options.background : parsedData.backgroundColor;

إنه مرتبط بالتأكيد بخيارين لحجم الخلفية: احتواء أو غطاء.

أحدث التزام (html2canvas 0.4.1) أصلحه لي

لا يزال بلدي يفعل هذا حتى بعد الالتزام الأخير ...

تم تعيين حجم الخلفية الخاص بي على "الغلاف" وقد جربت أيضًا "تلقائي 100٪" ولا يزال أبيض / شفاف فقط.

إذا قمت بإزالة حجم الخلفية ، فسيتم التقاطها على ما يرام ... هل هناك المزيد من النصائح؟

إصلاح مؤقت ، استخدم:

b ackground: url ("... base64 ...")

ولا تستخدم

أيضًا ، لا تستخدم "العفاريت المتحركة" لأن html2canvas يبدو أنه لا يفهم ذلك.

لدي مشكلة في الصور الخلفية عندما يحتوي عنوان url على مسار نسبي لخلفية الدليل العلوي: url ("../ i / alerts-16x.png")

يعمل إذا تم تغيير موقع png في الخلفية التالية: url ("i / alerts-16x.png")

لم أتمكن من عرض صور الخلفية ويبدو أنها غلاف أو تحتوي على حجم خلفية ، لذلك قمت بتغيير السطر 350 في إصدار 0.4.1 إلى:

topPos = isNaN (parseInt (bgposition [1]، 10))؟ topPos: parseInt (bgposition [1] ، 10) ؛

ويعمل!

أنا على الإصدار 0.4.1

أنا أيضا أواجه مشكلة في الخلفية.

لقد غيرت العيش 350 على النحو الذي اقترحه fperich لكن لم يساعد.

جربت أيضًا صورة الخلفية base64 التي أوصى بها هيرنان أيضًا بدون فرحة.

عنوان url الذي أحاول تحويله هو هذا
http://prompter.rareapps.org/prompt/prompt-save3.php؟p=123

يتم التحويل مع الخلفية عندما أستخدم عارض صفحة الويب هنا
http://html2canvas.hertzen.com/screenshots.html

لكن على صفحتي ليس لديها خلفية. انظر عينة هنا
http://prompter.rareapps.org/prompt/prompt-save3.php؟p=123

الكود الذي أستخدمه هو هذا

<script type="text/javascript">
$(window).load(function() {
    html2canvas(document.body, {
        onrendered: function(canvas) {
        window.location.href = canvas.toDataURL('image/jpeg');
    },
    allowTaint: true,
    taintTest: false
    });
});
</script>

إنه يسمح أساسًا بتحميل الصفحة وتحويل نفسها إلى صورة.

اي شئ خطأ في الكود الخاص بي؟

شكرا

fperich يو روك مان !! شكرا

أنا ثاني ذلك ، fperich ، أنت الشخص المفضل لدي الآن!

شكرا لك fperich: D لقد عملت بشكل جيد

shauchenkaniklasvh ستقول يتم حل هذه المشكلة؟ هل يمكن / يجب إغلاق هذه القضية؟

باستخدام 0.4.1 (كل من الإصدار والمطور الأحدث) ، لا تظهر صورة الخلفية لعناصر طفلي (الأطفال كائنات متحركة) على اللوحة القماشية ، في Chrome لنظام التشغيل Windows على الأقل. بالرغم من ذلك ، يعمل Firefox لنظام التشغيل Windows بشكل جيد. في Chrome لنظام Mac ، أحصل على مربع أسود حيث يكون الامتداد مع صورة الخلفية. حاولت إصلاح fperich لكنه لم ينجح بالنسبة لي. صورة الخلفية على نفس الأصل ، وجميع الملفات في نفس الدليل على الخادم.

@ 4gstudios هل يمكنك وضع مثال مبسط في jsfiddle (أو في رابط متاح للجميع) لتوضيح المشكلة؟

تضمين التغريدة لم أستخدم jsfiddle لأنني لم أرغب في أن تكون الصور خارجية ، لذا يمكننا استبعاد المشكلات المتقاطعة.

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

يمكن أن يكون لها علاقة بكمية المعلومات الموجودة في png حيث يبدو أن png الأكثر تعقيدًا تعرض المشكلة بأبعاد أصغر نسبيًا. لا أعتقد أن الأمر يتعلق بالضرورة بحجم الملف لأنني عبثت قليلاً بتحسين png عبر tinypng.com وستواجه الصورة الأكبر حجمًا ذات حجم الملف الأصغر مشكلة في حين أن الصورة ذات الأبعاد الأصغر مع ملف أكبر الحجم لا.

تحقق من المثال الخاص بي: http://4gstudios.com/html2canvas/

يعرض المربع الأزرق بشكل جيد (صورة bg هي 100 × 7800 بكسل / 374 كيلوبايت)
المربع الأحمر لا يُعرض بشكل صحيح (صورة bg هي 100 × 25000 بكسل / 254 كيلوبايت)
-في OS X Chrome (الصندوق الأسود)
-OS X Safari (المربع "لا")
- ومن المحتمل فوز Chrome (كان يحدث بالأمس ولكن ليس بالقرب من أجهزة الصراف الآلي للكمبيوتر الشخصي)
يبدو أن -OS X Firefox يعمل بشكل جيد.

آمل أن أكون قد أوضحت ما أعتقد أنه المشكلة جيدًا ويمكننا حلها. يحتوي الكائن الذي أريد استخدامه في مشروعي على أكثر من 800 قاعدة مختلفة من قواعد css ولا أريد تغييرها حقًا!

تحرير: يستخدم المثال الخاص بي 0.4.1 ولكن لدي نفس المشكلة عندما حاولت 0.5.0rc1

ليس لدي OS X متاح للاختبار ، ولكن يبدو أنه يعمل بشكل جيد على Chrome 37 على Windows (Vista) و Chrome 38 beta على Linux (Debian Wheezy). ما هو إصدار Chrome الذي تستخدمه؟ هل جربت الاختبار في وضع التصفح المتخفي / مع إيقاف تشغيل جميع الملحقات؟

usmonster جربت للتو على Chrome 36 (Win7) ثم تم التحديث إلى Chrome 37 (Win7) ، ولا تزال تواجه المشكلة

@ 4gstudios إذا قمت بتشغيل التسجيل ، ماذا ترى في وحدة تحكم المتصفح؟

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

ثالثًا ، يرجى أيضًا التحقق مما إذا كانت هذه المشكلة تظهر أم لا حتى عند تعطيل جميع ملحقات Chrome. (إذا كان الأمر كذلك ، فأنا أتساءل عما إذا كانت مشكلة توقيت ، فقد يكون تنزيل الصورة و / أو عرضها بطيئًا جدًا؟)

تضمين التغريدة

1) تسجيل الدخول ...
html2canvas: يبدأ التحميل المسبق: إيجاد صور الخلفية html2canvas.js: 21
html2canvas: التحميل المسبق: البحث عن الصور html2canvas.js: 21
html2canvas: التحميل المسبق: تم. html2canvas.js: 21
html2canvas: البداية: الصور: 1/2 (فشل: 0) html2canvas.js: 21
html2canvas: البداية: الصور: 2/2 (فشل: 0) html2canvas.js: 21
انتهى تحميل الصور: # 2 (فشل: 0) html2canvas.js: 21
html2canvas: Renderer: Canvas تم عرضه - إرجاع قماش obj html2canvas.js: 21

2) تم التحديث لإتقان الفرع html2canvas.js

3) نعم ، حاولت مع جميع المعاقين. إذا كان الوقت قد حان ، فلا أعتقد أن هذا هو وقت التنزيل ، ولكن من المحتمل جدًا تقديم نعم.

@ 4gstudios هل لديك آلة أخرى للاختبار عليها؟ أيضًا ، لا يزال الرابط المباشر يبدو أنه يستخدم 0.4.1.

usmonster ، حسنًا ، لقد أصلحت ذلك. اختبرته للتو أيضًا على جهاز WinServer2012 ، Chrome 37 ، نفس المشكلة مع عرض الصندوق الأسود بدلاً من bg

حسنًا ، ما زلت لا أستطيع إعادة إنتاج المشكلة على أيٍّ من أجهزتي المتاحة ، لكن زميلًا يمكنه استخدام جهاز Windows 7 الخاص به. niklasvh ، brcontainer أي أفكار؟ أعتقد أن الأمر يتعلق بالتركيب / التنقيط المسرع من خلال GPU الخاص بالنظام الأساسي .. سأحاول اختبار ذلك لاحقًا هذا الأسبوع إذا كان بإمكاني الوصول إلى جهاز W7 الخاص بي ، لكنني أشعر بالفضول ... @ 4gstudios ، ماذا يحدث إذا قسمت صورتك الثانية إلى النصف واختبرت مرة أخرى؟ واستمر في خفضه إلى النصف (وضبط قاعدة CSS) حتى يختفي الخطأ؟ أريد معرفة ما إذا كانت هناك منطقة "مثيرة للاهتمام" في PNG تسبب هذه المشكلة.

usmonster حدث في نظام التشغيل Windows 7 x64 الخاص بي مع Chrome. سأحاول أن أفعل التصحيح.
هناك بعض المشاكل التي تحدث في windows7x64 ولكنها لا تحدث في الإصدار 32 ، أعتقد أنها خطأ في Chrome.

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

على الرغم من عدم ارتباطها مباشرة بحجم الصورة المصدر ، فإن النتائج المتباينة ستمنحك فكرة عن المشكلات المتعلقة بالصور الكبيرة واللوحات القماشية:

• http://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element
• http://social.msdn.microsoft.com/Forums/windowsapps/en-US/53c368e5-042b-4c3f-8903-ee024f4f7933/canvas-max-size؟forum=winappswithhtml5
• https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html#//apple_ref/doc/uid/TP40006482 -SW15

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

@ 4gstudiosbrcontainer ما مقدار الذاكرة المتوفرة على أجهزتك حيث تمكنت من تكرار المشكلة؟

تضمين التغريدة

• Windows 7 Home Premium x64
• Intel Core i5 CPU M450 بسرعة 2.40 جيجاهرتز
• 4 جيجا بايت رام

سأختبر على windows 32bit (ممكن جدا) ، لكنني أعتقد أن المشكلة تحدث فقط في Windows64bit

كما أظن ، تحدث المشكلة فقط في "Windows x64" ، وكذلك https://github.com/niklasvh/html2canvas/issues/206#issuecomment -17744888 ، بمعنى آخر ، العمل في Windows 32 بت ، فشل في Windows 64 بت ، خطأ واحد محتمل في Chrome.

brcontainer تحدث المشكلة بالنسبة لي في Chrome و Safari على OS X 10.7 أيضًا ...

لقد اختبرت أيضًا على جهاز Windows 7 الخاص بي 32 بت ، وكل شيء يعمل بشكل جيد (لا يوجد خطأ). هذا بالتأكيد يبدو وكأنه مشكلة نظام 64 بت فقط - التقاط رائع ،brcontainer! شيء آخر يجب ملاحظته هو أن إصدارًا جديدًا من Chrome مخصصًا لأنظمة 64 بت قد تم طرحه مؤخرًا:

http://blog.chromium.org/2014/08/64-bits-of-awesome-64-bit-windows_26.html
https://www.google.com/chrome/browser/؟platform=win64 (رابط تنزيل Windows)
http://blog.chromium.org/2014/08/mac-chrome-when-im-sixty-four-bits.html (Mac لا يزال في مرحلة تجريبية)

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

usmonster حسنا بلدي Windows7 هو 64 بت. يؤثر الخطأ على كل من 32 بت و 64 بت من Chrome على Win7 64 بت. أعتقد أنه يؤثر على بعض أجهزة OSX أيضًا. شكرًا للرابط للحصول على الإصدار 64 بت من Chrome ، على الرغم من أنه لا يحل مشكلتي: ابكي:

يبدو هذا وكأنه خطأ في Chrome وليس عدم توافق مع "Windows 64 بت" (أو Mac OSX)

brcontainer أوافق على أن الأمر يبدو وكأنه مشكلة في متصفحي Chrome & WebKit على نظامي التشغيل Windows و Mac 64 بت (ولكن ليس Linux .. على الأقل ليس في مربع Debian 64 بت مع ذاكرة وصول عشوائي بسعة 8 جيجابايت) ، على الرغم من أن @ 4gstudios كان يمكنك رؤية الخطأ في نظام التشغيل Windows 32 بت؟ وما مقدار ذاكرة الوصول العشوائي الموجودة على أجهزتك المتأثرة بالمشكلة؟

سيكون من الجيد أن تكون قادرًا على تقليل هذه المشكلة إلى جذورها. تحتوي PNG الثانية على تدرجات وأبعاد أكبر بكثير من صورة PNG الأولى. إذا كان لدي آلة متأثرة لأختبرها ، فسأنتقل إلى ملف PNG "السيئ" حتى أتمكن من معرفة ما إذا كانت هناك مشكلة معينة في المنطقة أو الحجم الذي يسبب ذلك. (ربما يهم أيضًا niklasvh : http://wkbug.com/52391)

تضمين التغريدة

في AppleWebkit (الإصدار 538.1) و "Safari 5.1.7" (الإصدار 534.57.2 - لا يحصل هذا المتصفح على المزيد من التحديثات) لنظام التشغيل Windows .then لا يعمل (ليس إطلاقًا / مشغل).

لذلك لم أتمكن من اختبار ما إذا كان ذلك هو فشل "Webkit" أو فشل "Blink" (محرك مفترق Webkit في Chrome) أو حتى فشل بسبب نقص "ذاكرة الوصول العشوائي".

brcontainer أعتقد أنه من الآمن افتراض أنه ، وفقًا لـ @ 4gstudios ، كان الخطأ

usmonster لم أتمكن من اختبار النوافذ لأن .then(...) لا يعمل في AppleWebkit (الإصدار 538.1)

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

usmonster ، brcontainer ، niklasvh ، شكرًا لك على كل ما قدمته من مساعدة لحل هذه المشكلة

niklasvh onrendered مهمل. إذن ما الذي يمكنني استخدامه بدلاً من ذلك؟ أنا أستخدم 0.5.0-alpha1.

كما أن صورة الخلفية لا يتم تنزيلها على الرغم من أن الصور في نفس المجال.

html2canvas ($ ("# foredownload table")، {
التسجيل: صحيح ،
onrendered: الوظيفة (ج) {
var myImage = c.toDataURL ("images / jpeg") ؛
$ ('# downloadableImage'). prop ('href'، myImage)؛
}
}) ؛
سيكون موضع تقدير أي مساعدة. شكرا

@ codegiant2 https://github.com/niklasvh/html2canvas#usage .

Thanx fperich لقد عملت معي !!

تضمين التغريدة
ش تساعدني كثيرا شكرا جزيلا!

كنت وجه صورة خلفية مقصوصة للجسم
(small bounds.height من NodeContainer.prototype.parseBackgroundSize - html2canvas 0.5.0-beta3)

body {
    background-image: url(./res/bg.jpeg);
    background-repeat:no-repeat;
    background-position:center center;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}

حلها مضيفا

html, body {
   margin: 0;
   padding: 0;
   height: 100%;
}

شكرًا لـ niklasvh وجميع المساهمين على هذا الجزء الجميل من التعليمات البرمجية!

لدي أيضًا نفس المشكلة ، فأنا أقوم بالتحميل من صورة s3 لا تظهر في القماش ، لكني أقوم بالتحميل محليًا في نظامي يعمل بشكل جيد كيف يمكنني حل

أنا أيضا أواجه نفس المشكلة.

فشل تحميل صورة الخلفية. أتلقى رسالة خطأ خطأ في تحميل الخلفية:

jsFiddle هنا

من فضلك ساعدني لاصلاح هذه المشكلة.
شكرا،

مرحبًا gopiss ،

استخدم خيار كورس.

html2canvas(document.body, {
            onrendered: function (canvas) {
.....
            },
            useCORS: true
        });

تضمين التغريدة
لا تزال مشكلة تحميل صورة الحدود موجودة. انظر بلدي المحدث JSFiddle .
لا يتم تحميل صورة الحدود وتظهر فقط حدود اللون الأسود.

أواجه نفس المشكلة. أدناه سجلات من وحدة تحكم الكروم
html2canvas: يبدأ التحميل المسبق: البحث عن صور الخلفية
html2canvas.js: 21 html2canvas: start: images: 1/1 (فشل: 0)
html2canvas.js: 21 html2canvas: start: images: 2/2 (فشل: 0)
html2canvas.js: 21 html2canvas: التحميل المسبق: البحث عن الصور
html2canvas.js: 21 html2canvas: التحميل المسبق: Done.
html2canvas.js: 21 html2canvas: start: images: 2/2 (فشل: 0)
html2canvas.js: 21 انتهى تحميل الصور: # 2 (فشل: 0)
html2canvas.js: 21 html2canvas: خطأ في تحميل الخلفية:
html2canvas.js: 21 html2canvas: Renderer: Canvas renderer done - إرجاع canvas obj

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

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

مجرد التعليق لأن هذا قد يساعد شخص ما.
كانت مشكلتي أن كل شيء محليًا كان يعمل ولكن في الإنتاج فشل في عرض صور خلفية css.
كان السبب هو أننا كنا نستخدم CloudFront - مما يعني أن عناوين url في ملف css كانت تشير إلى الأصول الموجودة على مجال cloudfront ، بينما كان يتم تنفيذ JS على مجال منفصل.
ومع ذلك ، لم يكن سجل html2canvas يشير إلى أنها كانت مشكلة أساسية.
لا يبدو أن 'useCORS' يعمل من تلقاء نفسه لأنني أعتقد أنه يتطلب عنوان url وكيلًا أو شيء من هذا القبيل.

jacobclarke بالنسبة لي أيضًا نفس المشكلة عند استخدام html2canvas لالتقاط صور الخلفية على قماش في صور S3 المحلية التي يتم التقاطها ولكن في الإنتاج لا يتم التقاط صور الخلفية. إصدار html2canvas الخاص بي هو v1.0.0