Html2canvas: Os ícones FontAwesome não são renderizados apenas no firefox

Você poderia configurar um exemplo no jsfiddle?

http://jsfiddle.net/3ub69/

Tive o mesmo problema com uma fonte de ícone personalizada. Ele funciona no Safari e no Chrome, mas não funciona no Firefox e no IE.

Fiz algumas pesquisas e fez funcionar no Firefox 26 e no IE 11. O problema é a seguinte linha:

https://github.com/niklasvh/html2canvas/blob/master/src/Parse.js#L951

Vou tentar explicar por que está acontecendo. Algumas das minhas suposições podem estar erradas, então sinta-se à vontade para me corrigir.

Parece que no não-webkitbrowser, o objeto que é retornado por getComputedStyles define apenas as propriedades numéricas { 0: 'fontFamily' } no objeto e os pares de valores-chave { fontFamily: 'fontawesome' } no protótipo. Como Object.keys funciona como um loop for in com Object.hasOwnProperty ele está deixando de fora os pares de valores, então parece que nenhum estilo css foi copiado.

Para corrigir isso, você pode substituir Object.keys() , o método de filtro e o método forEach por um loop for in .

for (var prop in elStyle) {
  if (indexedProperty(prop) && prop !== 'cssText') {
    // Prevent assigning of read only CSS Rules, ex. length, parentRule
    try {
      elps.style[prop] = elStyle[prop];
    } catch (e) {
      h2clog(['Tried to assign readonly property ', prop, 'Error:', e]);
    }
  }
}

A razão pela qual estou verificando prop !== 'cssText' é porque no Firefox é sempre uma string vazia (bug?). Parece que, se você copiar essa string vazia para o pseudoelemento, ele redefinirá o fontFamily novamente.

Espero que isto ajude.

@Enome isso é muito bom, embora eu ainda não tenha testado, envie um "Pull Request".

Obrigado! : +1:

@Enome alguma vez fez uma solicitação de pull sobre este tópico? Atualmente, estou usando o código dele como uma solução alternativa.

@fpslater Nunca fiz um pedido pull. Se bem me lembro, parei de tentar converter html -> canvas e comecei a usar svg.

FontAwesome também não consegue renderizar para mim em navegadores webkit como Chrome e PhantomJS

@kmdavis Você já experimentou o html2canvas v0.5?

No momento, estamos usando html2canvas v0.5.0-alpha

Você poderia fornecer um exemplo simples no jsfiddle onde o problema pode ser replicado ou http://jsfiddle.net/3ub69/52/ não funciona para você?

Estou tendo esse problema também. Como faço para atualizar para o html2canvas v0.5? Me sinto bobo perguntando isso, mas não vejo tal branch ou tag neste repo.

Desde já, obrigado.

PS Estou usando html2canvas via rails-assets com gem 'rails-assets-html2canvas e o seguinte arquivo bower.json :

{
  "name": "My-App",
  "dependencies": {
    "html2canvas": "https://github.com/niklasvh/html2canvas"
  }
}

Pelo que vejo em https://rails-assets.org/components apenas as versões <= 0.4.1 estão disponíveis para rails-assets. Então, simplesmente adicionei o dist / html2canvas.js mais recente à minha pasta app/assets/javascripts/vendor/ e irei usá-lo assim por enquanto. Obrigado por tornar esta biblioteca incrivelmente útil!

@sweetleon Tente trocar seu arquivo html2canvas.js por aquele que modifiquei aqui. Funcionou para mim

https://github.com/fpslater/fix-html2canvas-webkit-font-conversion

@sweetleon Oh,

Estou tendo o mesmo problema

O problema com o fontawesome ainda acontece na versão 'html2canvas 1.0.0-alpha.12'

Qualquer solução? obrigado

O problema com o fontawesome ainda acontece na versão 'html2canvas 1.0.0-rc.5