Html2canvas: Los iconos de FontAwesome no se representan solo en Firefox

¿Podría configurar un ejemplo en jsfiddle?

http://jsfiddle.net/3ub69/

Me encontré con el mismo problema con una fuente de icono personalizada. Funciona en Safari y Chrome pero no en Firefox e IE.

Investigué un poco y lo hizo funcionar en Firefox 26 e IE 11. El problema es la siguiente línea:

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

Intentaré explicar por qué está sucediendo. Algunas de mis suposiciones pueden estar equivocadas, así que no dudes en corregirme.

Parece que en un navegador que no es webkit, el objeto que devuelve getComputedStyles solo establece las propiedades numéricas { 0: 'fontFamily' } en el objeto y los pares de valores clave { fontFamily: 'fontawesome' } en el prototipo. Debido a que Object.keys funciona como un bucle for in con Object.hasOwnProperty , omite los pares de valores, por lo que parece que no se copia ningún estilo CSS.

Para solucionarlo, puede reemplazar Object.keys() , el método de filtro y el método forEach con un bucle 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]);
    }
  }
}

La razón por la que estoy comprobando prop !== 'cssText' es porque en Firefox siempre es una cadena vacía (¿error?). Parece que si copia esa cadena vacía en el pseudo elemento, restablecerá fontFamily nuevamente.

Espero que esto ayude.

@Enome esto es muy bueno, aunque todavía no lo he probado, por favor envíe un "Pull Request".

¡Gracias! : +1:

¿ @Enome alguna vez hizo una solicitud de extracción sobre este tema? Actualmente estoy usando su código como solución.

@fpslater Nunca hice una solicitud de extracción. Si mal no recuerdo, dejé de intentar convertir html -> lienzo y comencé a usar svg en su lugar.

FontAwesome tampoco se puede renderizar para mí en navegadores webkit como Chrome y PhantomJS

@kmdavis ¿Has probado html2canvas v0.5?

Actualmente estamos usando html2canvas v0.5.0-alpha

¿Podría proporcionar un ejemplo simple en jsfiddle donde el problema se puede replicar o http://jsfiddle.net/3ub69/52/ no funciona para usted?

Yo también tengo este problema. ¿Cómo actualizo a html2canvas v0.5? Me siento tonto al preguntar esto, pero no veo una rama o etiqueta de este tipo en este repositorio.

Gracias por adelantado.

PD: estoy usando html2canvas a través de rails-assets con gem 'rails-assets-html2canvas y el siguiente archivo bower.json :

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

Por lo que veo en https://rails-assets.org/components, solo las versiones <= 0.4.1 están disponibles para rails-assets. Así que simplemente agregué el último dist / html2canvas.js a mi carpeta app/assets/javascripts/vendor/ y lo usaré así por el momento. ¡Gracias por hacer esta biblioteca increíblemente útil!

@sweetleon Intenta cambiar tu archivo html2canvas.js por el que modifiqué aquí. Funcionó para mí.

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

@sweetleon Oh no importa, ya has encontrado una solución ;-)

Estoy teniendo el mismo problema

El problema con fontawesome todavía ocurre en la versión 'html2canvas 1.0.0-alpha.12'

¿Alguna solución? Gracias

El problema con fontawesome todavía ocurre en la versión 'html2canvas 1.0.0-rc.5