Html2canvas: فشلت مطابقة Color-stop مع TypeError بسبب تعبير عادي خاطئ

سيكون طلب السحب مع الإصلاح والاختبارات لدعمه ممتازًا!

سأحاول إلقاء نظرة في نهاية هذا الأسبوع. ملاحظة في تقرير المصير:
https://developer.mozilla.org/docs/Web/CSS/color_value
https://developer.mozilla.org/docs/Web/CSS/gradient
http://stackoverflow.com/a/12456392/357774

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

على سبيل المثال ، إذا كان من الممكن تحليل أي لون (hex ، rgb ، rgba ، hls ، hlsa ، اسم محدد مسبقًا مثل "أحمر" ، "أخضر" وما إلى ذلك) في كائن ملون بـ r و g و b وقيم محددة ، فسيكون تسهيل تنفيذ الإطار الداخلي أيضًا بشكل ملحوظ.

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

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

أي تحديث على هذا؟

إيه ، آسف ، ليس بعد. : / تم إغراقها ولدي موارد حوسبية محدودة ، على الرغم من أنني قمت بإعداد بعض الاختبارات محليًا (لم يتم تنفيذ أي شيء بعد).

لقد أضفت تحليل الألوان الأساسي (المسمى و rgb و rgba و hex3 و hex6 حتى الآن) وقمت بتغيير جميع استخدامات الألوان لاستخدامها. لم يتم تحديث regexps التدرج حتى الآن.

راجع https://github.com/niklasvh/html2canvas/commit/313c227a1fed416331978e365ef82000ea7f7aa5

لطيف - جيد! سألقي نظرة في نهاية هذا الأسبوع وأتعرف على تحديث هذه regexps.

niklasvh @ هل يمكنك إلقاء نظرة على الالتزام الذي قمت به للتو على فرعي (359ee8b) وإخباري برأيك؟ سأزيل تعليقاتي الزائدة وسأضيف اختبارات لأسماء الألوان قريبًا ، ولكن هل يمكنك أيضًا إلقاء نظرة على التغيير الآخر؟

لقد قمت بتصحيح تحليل الاتجاه لـ Firefox ، لذا يجب أن تعمل بعض التدرجات الخطية التي لم يتم عرضها بشكل صحيح من قبل. يمكنك مشاهدة الاختبار اليدوي الذي وضعته مؤقتًا في tests/lineargradients_manual.html (بشكل أساسي نسخة من tests/cases/background/linear-gradient.html ). أفترض أنه يمكنني التحقق من زيادة الدقة وعدم وجود تراجع في المتصفحات / الإصدارات الأخرى بمجرد تشغيل اختبارات السيلينيوم ، ولكن هل يمكنك التحقق من فضلك لمعرفة ما إذا كان هذا على ما يرام؟ أظن أن تحسين دقة العرض يمكن رؤيته فقط عند مقارنة الإصدارات الأحدث من FF من تلك التي تم اختبارها .. (يبدو أن الإصدار الوحيد من Firefox الذي تم اختباره هو 15 ؟؟)

حسنًا ، تمسك بهذه الفكرة ، ربما فعلت شيئًا غريبًا ، فالمربعات على جهازي المنزلي هي في الغالب سوداء الآن ..

آه ، كلا ، يبدو أن 498527918c3324dce77260057bc47c280cc3324f هي مشكلة الالتزام ، تبدو أشيائي جيدة. : sweat_smile:

ماذا يحدث إذا كانت النسبة غير 100٪ أو 0٪؟

اعتبارًا من الآن ، لا يدعم النسب المئوية العشوائية (يتركها على أنها النسبة الافتراضية 50٪) ، ولكن يمكنني إضافة ذلك بسهولة كافية. ( تحديث : دعم مضاف للنسب التعسفية: 6af1874dc04c81d1aba5d6e8e6c8ef69681a2e49.)

ما لست متأكدًا منه هو أطوال غير النسبة المئوية ، والتي يمكن أن تكون في px ، em ، rem ، ex ، cm ، mm ، in ، pc ، pt ، إلخ ... لم أبحث عنها بعد في الكود ، لكن هل أنت كذلك هل لديك بالفعل طريقة للتعامل مع / تحويل أطوال الوحدات المختلفة؟ (إذا لم يكن الأمر كذلك ، فهل يجب أن يصبح ذلك جزءًا من هذه الميزة ، أم يجب أن يتم تنفيذه بشكل منفصل؟)

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

niklasvh لقد حصلت للتو على مزيد من الوقت للنظر في هذا والعمل عليه. هل يمكنك إلقاء نظرة على فرعي fix-firefox-gradients والتعليق قبل تقديم طلب سحب؟

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

شكرا! سنلقي نظرة فاحصة على هذا قريبًا وأعود إليك بأي ملاحظات قد تكون لدي

أي تقدم في هذا؟ لا تزال هناك حاجة!

أنا مستعد لتقديم طلب سحب إذا كان بإمكان @ niklasvh إعطاء الطريقة التي استخدمتها في فرعي علامة رائعة ..

: +1: لقد واجهت هذا للتو:

TypeError: Cannot read property '1' of null at GradientContainer.<anonymous> (http://localhost:8100/all.js:34496:44) 
at Array.map (native) 
at GradientContainer.LinearGradientContainer (http://localhost:8100/all.js:34493:66)
at ImageLoader.279.ImageLoader.loadImage (http://localhost:8100/all.js:34367:16) 
at ImageLoader.<anonymous> (http://localhost:8100/all.js:34339:46) 
at Array.forEach (native) 
at ImageLoader.279.ImageLoader.addImage (http://localhost:8100/all.js:34337:23) 
at Array.forEach (native) 
at ImageLoader.279.ImageLoader.findBackgroundImage (http://localhost:8100/all.js:34331:71) 
at 295.exports.bind (http://localhost:8100/all.js:36357:25)

يا @ niklasvh! شكرا لإصلاحك # 526.

هل سنحت لك فرصة إلقاء نظرة على فرعي fix-firefox-gradients ؟ سأعيد تحديد الفرع الخاص بي (وأصلح أي تعارضات جديدة) قبل أن أقوم بإجراء العلاقات العامة ، ولكن يرجى إعلامي إذا كان سيتم الترحيب بالعلاقات العامة. (هل تعتقد أنك ستتمكن من مراجعته في فترة زمنية معقولة؟) شكرًا!

usmonster لا ، آسف فاتني ذلك. إحدى المشكلات المحتملة التي كنت أفكر فيها أثناء إجراء هذا الإصلاح هي أنه إذا قرر المتصفح عدم تحويل الألوان المسماة مثل red أو blue إلى كل منها rgb أو rgba قيم transparent لن تعمل. تأخذ الوحدة النمطية Color في الحسبان جميع متغيرات الألوان المختلفة ، لكنني لست سعيدًا تمامًا بكيفية إجراء التحليل الحالي في master لتبدأ به.

أي أفكار حول كيفية التعامل مع الألوان المسماة؟

niklasvh ، يجب أن يكون البحث والتطبيع الذي تم إجراؤه بالفعل بواسطة المُنشئ Color كافيين للتعامل مع جميع الألوان المسماة ، إلا إذا أسأت فهم شيء ما؟

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

usmonster أنت محق ، كنت أشير إلى https://github.com/niklasvh/html2canvas/compare/master...usmonster : fix-firefox-gradients # diff-48b5afb6985c457b9f79fcca1cfb499dR21 التي لاحظت الآن أنها تأخذ في الاعتبار الألوان المسماة ، لذلك لا توجد مشكلة هناك. تبدو جيدة بخلاف ذلك ، هل تمانع في إعادة التأسيس وتقديم طلب سحب؟

لا مشكلة! سأحاول إلقاء نظرة في اليومين المقبلين - لقد فاتني نوعًا ما نافذة عطلة نهاية الأسبوع. : /

niklasvh الرجاء مشاهدة # 708. :)

تلقيت "TypeError: colorStopMatch is null" على html2canvas.js: 1454: 13 في FireFox. في كروم انها تعمل.

مرحبًا @ Observer999! تم إغلاق هذه القضية. الرجاء البحث عن مشكلة مفتوحة مماثلة أو إنشاء مشكلة جديدة مع ارتباط إلى صفحة تعيد إظهار المشكلة التي تواجهها. (يرجى أيضًا تحديد إصدار Firefox الذي اختبرت فيه.) يمكنني أن أتخيل أنه قد يكون له علاقة بـ TODOs في الكود .. شكرًا!

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

html2canvas.js: formatted: 1377 Uncaught (في الوعد) TypeError: Cannot read property '1' of null
في LinearGradientContainer.(html2canvas.js: formatted: 1377)
في Array.map ()
في LinearGradientContainer الجديد (html2canvas.js: التنسيق: 1374)
في ImageLoader.loadImage (html2canvas.js: formatted: 1256)
في ImageLoader.(html2canvas.js: formatted: 1227)
في Array.forEach ()
في ImageLoader.(html2canvas.js: formatted: 1225)
في Array.forEach ()
في ImageLoader.findBackgroundImage (html2canvas.js: formatted: 1219)
في html2canvas.js: التنسيق: 2563