Html2canvas: Der Farbstopp-Abgleich schlägt mit TypeError aufgrund eines fehlerhaften Regexp fehl

Eine Pull-Anfrage mit dem Fix und Tests zur Unterstützung wäre ausgezeichnet!

Ich versuche dieses Wochenende mal reinzuschauen. Notiz an mich selbst:
https://developer.mozilla.org/docs/Web/CSS/color_value
https://developer.mozilla.org/docs/Web/CSS/gradient
http://stackoverflow.com/a/12456392/357774

In Bezug auf die Implementierung von Einfügungen im Rahmenstil ist es erforderlich, auch ein gemeinsames Parsen für Farben zu erhalten, da Farben um einen bestimmten Prozentsatz abgedunkelt / aufgehellt werden müssen. Wenn mit diesem Farbverlaufs-Fix Farben in ein gemeinsames Format geparst werden müssen, kann dies auch mit dem border-style: Inset nützlich sein.

Wenn beispielsweise eine beliebige Farbe (hex, rgb, rgba, hls, hlsa, vordefinierter Name wie 'rot', 'grün' usw.) erleichtern auch die Umsetzung des Bordüreneinsatzes erheblich.

Einverstanden, dass eine gemeinsame Farbanalyse/-darstellung wiederverwendet werden kann und sollte. Ich werde es mir merken und habe wahrscheinlich Fragen.

Hatte am Wochenende keine Gelegenheit, mir das anzuschauen, habe vielleicht/hoffentlich morgen Zeit.

Gibt es hierzu Neuigkeiten?

Äh, tut mir leid, noch nicht. :/ Ich war überfordert und hatte begrenzte Computerressourcen, obwohl ich einige Tests lokal eingerichtet habe (noch nichts implementiert habe).

Ich habe grundlegendes Farbparsing hinzugefügt (bisher benannt, rgb, rgba, hex3 und hex6) und alle Verwendungen von Farben geändert, um diese zu verwenden. Die Gradienten-Regexps wurden noch nicht aktualisiert.

Siehe https://github.com/niklasvh/html2canvas/commit/313c227a1fed416331978e365ef82000ea7f7aa5

Schön! Ich werde dieses Wochenende einen Blick darauf werfen und sehen, wie diese Regexps aktualisiert werden.

@niklasvh Können Sie sich das Commit ansehen, das ich gerade in meinem Branch (359ee8b) vorgenommen habe, und mir Ihre Meinung mitteilen? Ich werde meine überflüssigen Kommentare entfernen und bald Tests für Farbnamen hinzufügen, aber können Sie sich bitte auch die andere Änderung ansehen?

Ich habe die Richtungsanalyse für Firefox korrigiert, sodass bestimmte lineare Farbverläufe, die zuvor nicht korrekt gerendert wurden, jetzt funktionieren sollten. Sie können den manuellen Test sehen, den ich nur vorübergehend in tests/lineargradients_manual.html eingefügt habe (im Grunde eine Kopie von tests/cases/background/linear-gradient.html ). Ich nehme an, ich kann die Genauigkeitserhöhung und keine Regressionen auf anderen Browsern/Versionen überprüfen, sobald die Selentests ausgeführt werden können, aber können Sie bitte überprüfen, ob dies in Ordnung ist? Ich vermute, dass die Verbesserung der Rendergenauigkeit nur beim Vergleich neuerer Versionen von FF als den getesteten zu sehen ist. (Sieht so aus, als ob die einzige getestete Version von Firefox 15 ist??)

Hmm, behalte den Gedanken, ich habe vielleicht etwas Seltsames getan, die Quadrate auf meinem Heimcomputer sind jetzt größtenteils schwarz.

Ah, nein, sieht aus wie 498527918c3324dce77260057bc47c280cc3324f ist das Problem Commit, mein Zeug sieht ok aus. :sweat_smile:

Was passiert, wenn der Prozentsatz etwas anderes als 100 % oder 0 % ist?

Im Moment unterstützt es keine willkürlichen Prozentsätze (belässt sie als Standard 50%), aber ich kann das leicht hinzufügen. ( Update : Unterstützung für beliebige Prozentsätze hinzugefügt: 6af1874dc04c81d1aba5d6e8e6c8ef69681a2e49.)

Wobei ich mir nicht so sicher bin, sind nicht prozentuale Längen, die in px , em , rem , ex , cm , mm , in , pc , pt , etc... Ich habe im Code noch nicht danach gesucht, aber du? haben Sie bereits eine Möglichkeit, Längen verschiedener Einheiten zu verarbeiten/umzurechnen? (Wenn nicht, sollte dies Teil dieses Features werden oder sollte es separat implementiert werden?)

absolute Längen sollten einfach zu implementieren sein, aber ich denke, px sollte für den Anfang ausreichen.

@niklasvh Ich habe gerade etwas mehr Zeit, um mir das anzuschauen und daran zu arbeiten. Können Sie sich meinen fix-firefox-gradients Zweig ansehen und einen Kommentar abgeben, bevor ich einen Pull-Request mache?

Ich sollte beachten, dass, obwohl die Regexps Pixellängen (sowohl in den Startpositionen des Farbverlaufs als auch in den Farbstopppositionen) analysieren können, es immer noch keine Unterstützung für das korrekte Rendern gibt. Ich denke, der sauberste Weg, um Unterstützung für absolute Längen hinzuzufügen, wäre, Begrenzungsinformationen in die imageData , die an die Gradientencontainer-Konstruktoren übergeben werden, und sie dann in Prozentsätze umzuwandeln. Dies sollte jedoch wahrscheinlich in einem separaten Pull-Request erfolgen.

Vielen Dank! Werde mir das in Kürze genauer anschauen und mich mit Feedback bei dir melden

Gibt es diesbezüglich Fortschritte? Es wird noch gebraucht!

Ich bin bereit, eine Pull-Anfrage zu stellen, wenn @niklasvh dem Ansatz, den ich in meinem Zweig verwendet habe, einen Daumen nach oben geben kann.

:+1: Ich bin gerade darauf gestoßen:

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)

Hallo @niklasvh! Danke, dass du #526 repariert hast.

Hatten Sie jemals die Gelegenheit, sich meinen fix-firefox-gradients Zweig anzusehen? Ich würde meinen Zweig rebasieren (und alle neuen Konflikte beheben), bevor ich die PR mache, aber bitte lass es mich wissen, wenn eine PR noch willkommen wäre. (Glauben Sie, Sie könnten es in angemessener Zeit überprüfen?) Danke!

@usmonster Nein, tut mir leid, dass ich das verpasst habe. Ein potenzielles Problem, an das ich bei dieser Korrektur dachte, ist, dass wenn der Browser beschließt, benannte Farben wie red oder blue in ihre jeweiligen rgb oder rgba zu konvertieren transparent zu berücksichtigen, würde nicht funktionieren. Das Modul Color berücksichtigt all die verschiedenen Farbvarianten, aber ich bin nicht ganz zufrieden damit, wie das aktuelle Parsing in master von Anfang an durchgeführt wird.

Irgendwelche Ideen, wie die genannten Farben gehandhabt werden könnten?

@niklasvh , Die bereits vom Color Konstruktor durchgeführte Suche und Normalisierung sollte ausreichen, um alle benannten Farben zu verarbeiten, es sei denn, ich habe etwas falsch verstanden?

Darüber hinaus habe ich die regulären Ausdrücke, die zum Analysieren von Farben und linearen Verläufen verwendet werden, korrigiert, um sie robuster, korrekter und leistungsfähiger zu machen, sodass benannte Farben meiner Meinung nach kein Problem darstellen sollten. Was denken Sie?

@usmonster Sie haben Recht, ich bezog mich auf https://github.com/niklasvh/html2canvas/compare/master...usmonster :fix-firefox-gradients#diff-48b5afb6985c457b9f79fcca1cfb499dR21, das, wie ich jetzt bemerkt habe, benannte Farben berücksichtigt. also kein problem da. Sieht ansonsten gut aus. Würde es Ihnen etwas ausmachen, einen Pull-Request zu erstellen?

Kein Problem! Ich werde versuchen, in den nächsten Tagen einen Blick darauf zu werfen - ich habe mein Wochenendfenster irgendwie verpasst. :/

@niklasvh Siehe #708. :)

Ich habe "TypeError: colorStopMatch is null" bei html2canvas.js:1454:13 in FireFox erhalten. In Chrome funktioniert es.

Hallo @Beobachter999! Dieses Thema ist geschlossen. Bitte suchen Sie nach einem ähnlichen offenen Problem oder erstellen Sie ein neues Problem mit einem Link zu einer Seite, die das Problem reproduziert. (Bitte geben Sie dort auch an, in welcher Firefox-Version Sie getestet haben.) Ich kann mir vorstellen, dass es etwas mit den TODOs im Code zu tun haben könnte. Danke!

@usmonster @niklasvh Hallo Leute, ich weiß, dass dieses Problem geschlossen ist, aber ich verwende die neueste Version von html2canvas und ich erhalte den gleichen Fehler in der neuesten Chrome-Version, aber in Firefox funktioniert es.

html2canvas.js: formatted:1377 Uncaught (in Versprechen) TypeError: Eigenschaft '1' von null kann nicht gelesen werden
bei LinearGradientContainer.(html2canvas.js:formatiert:1377)
bei Array.map ()
im neuen LinearGradientContainer (html2canvas.js:formatted:1374)
bei ImageLoader.loadImage (html2canvas.js:formatted:1256)
bei ImageLoader.(html2canvas.js:formatiert:1227)
bei Array.forEach ()
bei ImageLoader.(html2canvas.js:formatiert:1225)
bei Array.forEach ()
bei ImageLoader.findBackgroundImage (html2canvas.js:formatted:1219)
bei html2canvas.js: formatiert:2563