Html2canvas: La coincidencia de color-stop falla con TypeError debido a una expresión regular defectuosa

¡Una solicitud de extracción con la corrección y las pruebas para respaldarla sería excelente!

Intentaré echarle un vistazo este fin de semana. Nota personal:
https://developer.mozilla.org/docs/Web/CSS/color_value
https://developer.mozilla.org/docs/Web/CSS/gradient
http://stackoverflow.com/a/12456392/357774

Con respecto a la implementación de la inserción de estilo de borde, también es necesario obtener un análisis común de los colores, ya que necesita oscurecer / aclarar los colores en un porcentaje específico. Con esta corrección de degradado, si es necesario analizar los colores en un formato común, también podría ser útil con el estilo de borde: recuadro.

Por ejemplo, si cualquier color (hexadecimal, rgb, rgba, hls, hlsa, nombre predefinido como 'rojo', 'verde', etc.) se pudiera analizar en un objeto de color con los valores r, g, by a definidos, lo haría También hacen que sea mucho más fácil implementar el recuadro de borde.

Se acordó que una representación / análisis sintáctico de color común puede y debe reutilizarse. Lo tendré en cuenta y probablemente tenga preguntas.

No tuve la oportunidad de ver esto durante el fin de semana, posiblemente tenga tiempo mañana.

¿Algún avance en esto?

Er, lo siento, todavía no. : / He estado abrumado y tenía recursos informáticos limitados, aunque configuré algunas pruebas localmente (aún no he implementado nada).

Agregué análisis de color básico (named, rgb, rgba, hex3 y hex6 hasta ahora) y cambié todos los usos del color para usarlos. Las expresiones regulares del gradiente aún no se han actualizado.

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

¡Bonito! Echaré un vistazo este fin de semana y veré cómo actualizar esas expresiones regulares.

@niklasvh ¿Puedes echar un vistazo a la confirmación que acabo de hacer en mi rama (359ee8b) y dejarme saber lo que piensas? Eliminaré mis comentarios superfluos y agregaré pruebas para los nombres de los colores pronto, pero ¿pueden también echar un vistazo al otro cambio?

Corregí el análisis de dirección para Firefox, por lo que ahora deberían funcionar ciertos gradientes lineales que no se representaban correctamente antes. Puede ver la prueba manual que puse temporalmente en tests/lineargradients_manual.html (básicamente una copia de tests/cases/background/linear-gradient.html ). Supongo que puedo verificar el aumento de precisión y que no haya regresiones en otros navegadores / versiones una vez que se puedan ejecutar las pruebas de selenio, pero ¿puede verificar si está bien? Sospecho que la mejora de la precisión del renderizado solo se puede ver comparando versiones más recientes de FF que las probadas ... (¿Parece que la única versión de Firefox probada es la 15?)

Mmmm, mantén ese pensamiento, puede que haya hecho algo extraño, los cuadrados de mi máquina doméstica son en su mayoría negros ahora ...

Ah, no, parece que 498527918c3324dce77260057bc47c280cc3324f es el problema de confirmación, mis cosas se ven bien. : sweat_smile:

¿Qué sucede si el porcentaje es diferente al 100% o al 0%?

A partir de ahora, no admite porcentajes arbitrarios (los deja como el 50% predeterminado), pero puedo agregar eso con bastante facilidad. ( Actualización : soporte agregado para porcentajes arbitrarios: 6af1874dc04c81d1aba5d6e8e6c8ef69681a2e49.)

De lo que no estoy tan seguro son las longitudes sin porcentaje, que pueden estar en px , em , rem , ex , cm , mm , in , pc , pt , etc ... Todavía no lo he buscado en el código, pero ¿ ¿Ya tienes una forma de manejar / convertir longitudes de varias unidades? (Si no es así, ¿debería formar parte de esta función o debería implementarse por separado?)

las longitudes absolutas deberían ser fáciles de implementar, pero creo que px debería ser suficiente para empezar.

@niklasvh Acabo de tener más tiempo para mirar y trabajar en esto. ¿Puedes echar un vistazo a mi rama fix-firefox-gradients y comentar antes de que haga una solicitud de extracción?

Debo señalar que, aunque las expresiones regulares pueden analizar longitudes de píxeles (tanto en las posiciones de inicio de degradado como en las posiciones de parada de color), todavía no hay soporte para representarlas correctamente. Creo que la forma más limpia de agregar soporte para longitudes absolutas sería incluir información de límites con el imageData que se pasa a los constructores de contenedores de gradiente y luego convertirlos en porcentajes. Sin embargo, probablemente debería ir en una solicitud de extracción separada.

¡Gracias! Lo analizaré más de cerca en breve y nos pondremos en contacto con usted con cualquier comentario que pueda tener.

¿Algún progreso en esto? ¡Todavía es necesario!

Estoy listo para hacer una solicitud de extracción si @niklasvh puede

: +1: Me acabo de encontrar con esto:

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)

¡Hola @niklasvh! Gracias por arreglar # 526.

¿Alguna vez tuviste la oportunidad de mirar mi sucursal fix-firefox-gradients ? Cambiaría la base de mi rama (y solucionaría cualquier conflicto nuevo) antes de hacer el PR, pero por favor, avíseme si un PR aún sería bienvenido. (¿Crees que podrías revisarlo en un período de tiempo razonable?) ¡Gracias!

@usmonster No, lo siento, me perdí eso. Un problema potencial en el que estaba pensando mientras hacía esa solución es que si el navegador decide no convertir colores con nombre como red o blue a sus respectivos rgb o rgba valores, simplemente teniendo en cuenta transparent no funcionaría. El módulo Color tiene en cuenta todas las diferentes variantes de color, pero no estoy muy contento con cómo se realiza el análisis actual en master para empezar.

¿Alguna idea de cómo se podrían manejar los colores nombrados?

@niklasvh , La búsqueda y normalización que ya ha realizado el constructor Color debería ser suficiente para manejar todos los colores nombrados, a menos que haya entendido mal algo.

Además, he corregido las expresiones regulares utilizadas para analizar colores y degradados lineales para hacerlos más robustos, correctos y de rendimiento, por lo que no creo que los colores con nombre deban ser un problema. ¿Qué piensas?

@usmonster Tienes razón, me refería a https://github.com/niklasvh/html2canvas/compare/master...usmonster : fix-firefox-gradients # diff-48b5afb6985c457b9f79fcca1cfb499dR21 que ahora noté que tiene en cuenta los colores con nombre, así que no hay problema. De lo contrario, se ve bien, ¿le importaría reajustar y realizar una solicitud de extracción?

¡No hay problema! Intentaré echarle un vistazo en los próximos días; me perdí mi ventana de fin de semana. : /

@niklasvh Consulte el n. ° 708. :)

Recibí "TypeError: colorStopMatch is null" en html2canvas.js: 1454: 13 en FireFox. En Chrome funciona.

¡Hola @ Observer999! Este problema está cerrado. Busque un problema abierto similar o cree un problema nuevo con un enlace a una página que reproduzca el problema que tiene. (Por favor, especifique también en qué versión de Firefox ha probado). Me imagino que podría tener algo que ver con los TODO en el código ... ¡Gracias!

@usmonster @niklasvh Hola chicos, sé que este problema está cerrado, pero estoy usando la última versión de html2canvas y recibo el mismo error en la última versión de Chrome, pero en Firefox está funcionando.

html2canvas.js: formateado: 1377 Uncaught (en promesa) TypeError: No se puede leer la propiedad '1' de nulo
en LinearGradientContainer.(html2canvas.js: formato: 1377)
en Array.map ()
en el nuevo LinearGradientContainer (html2canvas.js: formateado: 1374)
en ImageLoader.loadImage (html2canvas.js: formateado: 1256)
en ImageLoader.(html2canvas.js: formato: 1227)
en Array.forEach ()
en ImageLoader.(html2canvas.js: formato: 1225)
en Array.forEach ()
en ImageLoader.findBackgroundImage (html2canvas.js: formateado: 1219)
en html2canvas.js: con formato: 2563