Html2canvas: रंग-रोक मिलान दोषपूर्ण regexp के कारण TypeError के साथ विफल हो जाता है

इसका समर्थन करने के लिए फिक्स और परीक्षणों के साथ एक पुल अनुरोध उत्कृष्ट होगा!

मैं इस सप्ताह के अंत में एक नज़र डालने की कोशिश करूँगा। खुद पर ध्यान दें:
https://developer.mozilla.org/docs/Web/CSS/color_value
https://developer.mozilla.org/docs/Web/CSS/gradient
http://stackoverflow.com/a/12456392/357774

सीमा-शैली के इनसेट को लागू करने के संबंध में, रंगों के लिए भी एक सामान्य पार्सिंग प्राप्त करने की आवश्यकता है, क्योंकि इसे एक विशिष्ट प्रतिशत द्वारा रंगों को गहरा/हल्का करने की आवश्यकता होती है। इस ग्रेडिएंट फिक्स के साथ, यदि रंगों को एक सामान्य प्रारूप में पार्स करने की आवश्यकता है, तो यह सीमा-शैली: इनसेट के साथ भी उपयोगी हो सकता है।

उदाहरण के लिए, यदि कोई रंग (हेक्स, आरजीबी, आरजीबीए, एचएलएस, एचएलएसए, पूर्वनिर्धारित नाम जैसे 'लाल', 'हरा' इत्यादि) को आर, जी, बी और परिभाषित मानों के साथ रंगीन ऑब्जेक्ट में पार्स किया जा सकता है, तो यह होगा बॉर्डर इनसेट को भी लागू करना काफी आसान बना देता है।

सहमत हैं कि एक सामान्य रंग पार्सिंग/प्रतिनिधित्व का पुन: उपयोग किया जा सकता है और किया जाना चाहिए। मैं इसे ध्यान में रखूंगा और शायद मेरे पास प्रश्न हैं।

सप्ताहांत में इसे देखने का मौका नहीं मिला, संभवतः/उम्मीद है कि कल समय होगा।

इस पर किसी भी अद्यतन?

एर, क्षमा करें, अभी नहीं। :/ दलदल हो गया था और उसके पास सीमित कंप्यूटिंग संसाधन थे, हालांकि मैंने स्थानीय स्तर पर कुछ परीक्षण स्थापित किए थे (अभी तक कुछ भी लागू नहीं किया है)।

मैंने मूल रंग पार्सिंग (नाम, rgb, rgba, hex3 और hex6 अब तक) जोड़ा है और उन का उपयोग करने के लिए रंग के सभी उपयोगों को बदल दिया है। ग्रेडिएंट रेगेक्सप्स अभी तक अपडेट नहीं किया गया है।

देखें https://github.com/niklasvh/html2canvas/commit/313c227a1fed416331978e365ef82000ea7f7aa5

अच्छा! मैं इस सप्ताह के अंत में एक नज़र डालेगा और उन रेगेक्सप्स को अपडेट करने के बारे में देखूंगा।

@niklasvh क्या आप मेरे द्वारा अपनी शाखा (359ee8b) पर किए गए कमिटमेंट पर एक नज़र

मैंने फ़ायरफ़ॉक्स के लिए दिशा पार्सिंग को सही किया, इसलिए कुछ रैखिक ग्रेडियेंट जो पहले सही ढंग से प्रस्तुत नहीं करते थे, अब काम करना चाहिए। आप मैन्युअल परीक्षण देख सकते हैं जिसे मैंने अभी अस्थायी रूप से tests/lineargradients_manual.html (मूल रूप से tests/cases/background/linear-gradient.html की एक प्रति) में रखा है। मुझे लगता है कि सेलेनियम परीक्षण चलाने के बाद मैं सटीकता में वृद्धि और अन्य ब्राउज़रों/संस्करणों पर कोई रिग्रेशन नहीं सत्यापित कर सकता हूं, लेकिन क्या आप कृपया यह देखने के लिए जांच कर सकते हैं कि यह ठीक है? मुझे संदेह है कि रेंडर सटीकता में सुधार केवल परीक्षण किए गए एफएफ के हाल के संस्करणों की तुलना में देखा जा सकता है .. (ऐसा लगता है कि परीक्षण किए गए फ़ायरफ़ॉक्स का एकमात्र संस्करण 15 है ??)

हम्म, उस विचार को पकड़ो, मैंने कुछ अजीब किया होगा, मेरे घर की मशीन पर वर्ग अब ज्यादातर काले हैं ..

आह, नहीं, ऐसा लगता है कि 498527918c3324dce77260057bc47c280cc3324f समस्या है, मेरी सामग्री ठीक दिखती है। :पसीना_मुस्कुराना:

क्या होगा यदि प्रतिशत १००% या ०% के अलावा कुछ और है?

अभी के रूप में यह मनमानी प्रतिशत का समर्थन नहीं करता है (उन्हें डिफ़ॉल्ट 50% के रूप में छोड़ देता है), लेकिन मैं इसे आसानी से पर्याप्त जोड़ सकता हूं। ( अपडेट : मनमाने प्रतिशत के लिए अतिरिक्त समर्थन: 6af1874dc04c81d1aba5d6e8e6c8ef69681a2e49।)

जो मैं निश्चित नहीं हूं वह गैर-प्रतिशत लंबाई है, जो px , em , rem , ex , cm , mm , in , pc , pt , आदि... मैंने अभी तक कोड में इसकी तलाश नहीं की है, लेकिन क्या आप पहले से ही विभिन्न इकाइयों की लंबाई को संभालने/रूपांतरित करने का कोई तरीका है? (यदि नहीं, तो क्या यह इस सुविधा का हिस्सा बन जाना चाहिए, या इसे अलग से लागू किया जाना चाहिए?)

पूर्ण लंबाई लागू करना आसान होना चाहिए, लेकिन मुझे लगता है कि पीएक्स शुरू करने के लिए पर्याप्त होना चाहिए।

@niklasvh मुझे इस पर देखने और काम करने के लिए अभी कुछ और समय मिला है। क्या आप मेरी fix-firefox-gradients शाखा पर एक नज़र डाल सकते हैं और मेरे द्वारा पुल अनुरोध करने से पहले टिप्पणी कर सकते हैं?

मुझे यह ध्यान रखना चाहिए कि, हालांकि रेगेक्सप्स पिक्सेल लंबाई (ग्रेडिएंट स्टार्ट पोजीशन और कलर स्टॉप पोजीशन दोनों में) को पार्स कर सकते हैं, फिर भी उन्हें सही ढंग से प्रस्तुत करने के लिए कोई समर्थन नहीं है। मुझे लगता है कि पूर्ण लंबाई के लिए समर्थन जोड़ने का सबसे साफ तरीका 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 देखें। :)

मुझे फ़ायरफ़ॉक्स में html2canvas.js:1454:13 पर "TypeError: colorStopMatch is null" प्राप्त हुआ। क्रोम में यह काम कर रहा है।

हाय @ ऑब्जर्वर999! यह मुद्दा बंद है। कृपया इसी तरह के खुले मुद्दे की खोज करें या उस पृष्ठ के लिंक के साथ एक नया मुद्दा बनाएं जो आपके द्वारा की जा रही समस्या को पुन: उत्पन्न करता है। (कृपया यह भी निर्दिष्ट करें कि आपने फ़ायरफ़ॉक्स के किस संस्करण में परीक्षण किया है।) मैं कल्पना कर सकता हूं कि कोड में TODO के साथ

@usmonster @niklasvh नमस्कार दोस्तों मुझे पता है कि यह समस्या बंद हो गई है, लेकिन मैं html2canvas के नवीनतम संस्करण का उपयोग कर रहा हूं और मुझे क्रोम के नवीनतम संस्करण में वही त्रुटि मिल रही है लेकिन फ़ायरफ़ॉक्स में यह काम कर रहा है।

html2canvas.js: स्वरूपित: १३७७ ध्यान में न आया (वादे में) लेखन त्रुटि: शून्य की संपत्ति '1' नहीं पढ़ सकता
LinearGradientContainer पर।(html2canvas.js:formatted:1377)
Array.map पर ()
नए LinearGradientContainer पर (html2canvas.js:formatted:1374)
ImageLoader.loadImage पर (html2canvas.js:formatted:1256)
इमेजलोडर पर।(html2canvas.js:formatted:1227)
Array.forEach पर ()
इमेजलोडर पर।(html2canvas.js:formatted:1225)
Array.forEach पर ()
ImageLoader.findBackgroundImage पर (html2canvas.js:formatted:1219)
html2canvas.js पर: स्वरूपित:2563