Html2canvas: A correspondência de interrupção de cor falha com TypeError devido a regexp com defeito

Uma solicitação de pull com a correção e testes para suportá-la seria excelente!

Vou tentar dar uma olhada neste fim de semana. Nota para si mesmo:
https://developer.mozilla.org/docs/Web/CSS/color_value
https://developer.mozilla.org/docs/Web/CSS/gradient
http://stackoverflow.com/a/12456392/357774

Em relação à implementação da inserção de estilo de borda, há uma necessidade de obter uma análise comum para as cores também, uma vez que é necessário escurecer / clarear as cores em uma porcentagem específica. Com essa correção de gradiente, se houver necessidade de analisar as cores em um formato comum, também pode ser útil com o estilo de borda: inserção.

Por exemplo, se qualquer cor (hex, rgb, rgba, hls, hlsa, nome predefinido como 'vermelho', 'verde' etc.) pudesse ser analisada no objeto Cor com os valores r, g, b e a definidos, tornar significativamente mais fácil implementar a inserção da borda também.

Concordou que uma análise / representação de cor comum pode e deve ser reutilizada. Vou manter isso em mente e provavelmente terei dúvidas.

Não tive a chance de olhar para isso no fim de semana, possivelmente / espero ter tempo amanhã.

alguma atualização disso?

Er, desculpe, ainda não. : / Estive sobrecarregado e tinha recursos de computação limitados, embora eu tenha configurado alguns testes localmente (não implementei nada ainda).

Eu adicionei análise de cor básica (nomeado, rgb, rgba, hex3 e hex6 até agora) e mudei todos os usos de cores para usá-los. As expressões regulares de gradiente ainda não foram atualizadas.

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

Agradável! Vou dar uma olhada neste fim de semana e ver como atualizar essas expressões regulares.

@niklasvh Você pode dar uma olhada no commit que acabei de fazer no meu branch (359ee8b) e me dizer o que você achou? Removerei meus comentários supérfluos e adicionarei testes para nomes de cores em breve, mas você também pode dar uma olhada na outra alteração?

Corrigi a análise de direção para o Firefox, então certos gradientes lineares que não eram renderizados corretamente antes agora devem funcionar. Você pode ver o teste manual que coloquei temporariamente em tests/lineargradients_manual.html (basicamente uma cópia de tests/cases/background/linear-gradient.html ). Suponho que posso verificar o aumento da precisão e nenhuma regressão em outros navegadores / versões depois que os testes de selênio podem ser executados, mas você pode verificar se está tudo bem? Suspeito que a melhoria na precisão da renderização só pode ser vista comparando versões mais recentes do FF do que as testadas .. (Parece que a única versão testada do Firefox é 15 ??)

Hmm, segure esse pensamento, posso ter feito algo estranho, os quadrados na minha máquina doméstica estão quase todos pretos agora ..

Ah, não, parece que 498527918c3324dce77260057bc47c280cc3324f é o commit do problema, minhas coisas parecem ok. : sweat_smile:

O que acontece se a porcentagem for diferente de 100% ou 0%?

No momento, ele não suporta porcentagens arbitrárias (deixa-as como o padrão de 50%), mas posso adicionar isso com bastante facilidade. ( Atualização : adicionado suporte para porcentagens arbitrárias: 6af1874dc04c81d1aba5d6e8e6c8ef69681a2e49.)

Não tenho tanta certeza sobre os comprimentos não percentuais, que podem estar em px , em , rem , ex , cm , mm , in , pc , pt , etc ... Ainda não procurei no código, mas você já tem uma maneira de manipular / converter comprimentos de várias unidades? (Se não, isso deve se tornar parte deste recurso ou deve ser implementado separadamente?)

comprimentos absolutos devem ser fáceis de implementar, mas acho que px deve ser o suficiente para começar.

@niklasvh Acabei de ter mais algum tempo para analisar e trabalhar nisso. Você pode dar uma olhada em meu branch fix-firefox-gradients e comentar antes de eu fazer uma solicitação de pull?

Devo observar que, embora os regexps possam analisar comprimentos de pixel (tanto em posições de início de gradiente quanto em posições de parada de cor), ainda não há suporte para renderizá-los corretamente. Acho que a maneira mais limpa de adicionar suporte para comprimentos absolutos seria incluir informações de limites com imageData que é passado para os construtores de contêiner de gradiente e, em seguida, convertê-los em porcentagens. Isso provavelmente deve ir em uma solicitação de pull separada, no entanto.

Obrigado! Analisarei isso mais de perto em breve e entrarei em contato com você com qualquer feedback que eu possa ter

Algum progresso nisso? Ainda é necessário!

Estou pronto para fazer uma solicitação de pull se @niklasvh puder dar um

: +1: Acabei de encontrar este:

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)

Ei @niklasvh! Obrigado por corrigir o número 526.

Você já teve a chance de olhar minha filial fix-firefox-gradients ? Gostaria de realocar meu branch (e consertar quaisquer novos conflitos) antes de fazer o PR, mas por favor me avise se um PR ainda seria bem-vindo. (Você acha que seria capaz de revisá-lo em um período de tempo razoável?) Obrigado!

@usmonster Não, desculpe, eu perdi isso. Um problema em potencial que estava pensando ao fazer essa correção é que se o navegador decidir não converter cores nomeadas, como red ou blue para seus respectivos rgb ou rgba valores, simplesmente levando em conta transparent não funcionaria. O módulo Color leva em consideração todas as diferentes variações de cores, mas não estou muito feliz com a forma como a análise atual é feita em master para começar.

Alguma ideia de como as cores nomeadas podem ser tratadas?

@niklasvh , A pesquisa e a normalização que já foram feitas pelo construtor Color devem ser suficientes para lidar com todas as cores nomeadas, a menos que eu tenha entendido mal alguma coisa.

Além disso, corrigi as expressões regulares usadas para analisar cores e gradientes lineares para torná-los mais robustos, corretos e com desempenho, então não acho que as cores nomeadas devam ser um problema. O que você acha?

@usmonster Você está certo, eu estava me referindo a https://github.com/niklasvh/html2canvas/compare/master...usmonster : fix-firefox-gradients # diff-48b5afb6985c457b9f79fcca1cfb499dR21 que agora notei que leva em consideração as cores nomeadas, então não há problema nisso. Caso contrário, parece bom. Você se importaria de refazer a base e colocar uma solicitação de pull?

Sem problemas! Vou tentar dar uma olhada nos próximos dias - meio que perdi a janela do fim de semana. : /

@niklasvh Consulte # 708. :)

Recebi "TypeError: colorStopMatch is null" em html2canvas.js: 1454: 13 no FireFox. No Chrome está funcionando.

Olá, @ Observer999! Este problema foi encerrado. Pesquise um problema aberto semelhante ou crie um novo problema com um link para uma página que reproduz o problema que você está enfrentando. (Por favor, especifique lá em qual versão do Firefox você testou.) Posso imaginar que pode ter algo a ver com os TODOs no código .. Obrigado!

@usmonster @niklasvh Olá pessoal, sei que este problema está

html2canvas.js: formatado: 1377 Não capturado (em promessa) TypeError: Não é possível ler a propriedade '1' de nulo
em LinearGradientContainer.(html2canvas.js: formatado: 1377)
em Array.map ()
no novo LinearGradientContainer (html2canvas.js: formatted: 1374)
em ImageLoader.loadImage (html2canvas.js: formatado: 1256)
em ImageLoader.(html2canvas.js: formatado: 1227)
em Array.forEach ()
em ImageLoader.(html2canvas.js: formatado: 1225)
em Array.forEach ()
em ImageLoader.findBackgroundImage (html2canvas.js: formatted: 1219)
em html2canvas.js: formatado: 2563