Html2canvas: Les icônes FontAwesome ne sont pas rendues uniquement dans Firefox

Pourriez-vous configurer un exemple sur jsfiddle?

http://jsfiddle.net/3ub69/

Ran dans le même problème avec une police d'icônes personnalisée. Cela fonctionne dans Safari et Chrome mais ne fonctionne pas dans Firefox et IE.

J'ai creusé et fait fonctionner Firefox 26 et IE 11. Le problème est la ligne suivante:

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

J'essaierai d'expliquer pourquoi cela se produit. Certaines de mes hypothèses peuvent être fausses, alors n'hésitez pas à me corriger.

Il semble que dans non-webkitbrowser, l'objet retourné par getComputedStyles ne définit que les propriétés numériques { 0: 'fontFamily' } sur l'objet et les paires clé-valeur { fontFamily: 'fontawesome' } sur le prototype. Parce que Object.keys fonctionne comme une boucle for in avec Object.hasOwnProperty il laisse de côté les paires de valeurs, il semble donc qu'aucun style css n'est copié.

Pour résoudre ce problème, vous pouvez remplacer Object.keys() , la méthode de filtrage et la méthode forEach par une boucle 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 raison pour laquelle je vérifie prop !== 'cssText' est que dans Firefox, c'est toujours une chaîne vide (bug?). Il semble que si vous copiez cette chaîne vide sur le pseudo élément, cela réinitialisera fontFamily.

J'espère que cela t'aides.

@Enome c'est très bien, même si je n'ai toujours pas testé, merci d'envoyer une "Pull Request".

Merci! : +1:

@Enome a- t-

@fpslater Je n'ai jamais fait de pull request. Si je me souviens bien, j'ai cessé d'essayer de convertir html -> canvas et j'ai commencé à utiliser svg à la place.

FontAwesome ne parvient pas non plus à me rendre dans les navigateurs Webkit tels que Chrome et PhantomJS

@kmdavis Avez-vous essayé html2canvas v0.5?

Nous utilisons actuellement html2canvas v0.5.0-alpha

Pourriez-vous fournir un exemple simple sur jsfiddle où le problème peut être répliqué ou http://jsfiddle.net/3ub69/52/ ne fonctionne pas pour vous?

J'ai ce problème aussi. Comment mettre à niveau vers html2canvas v0.5? Je me sens idiot de demander cela, mais je ne vois pas une telle branche ou étiquette sur ce repo.

Merci d'avance.

PS J'utilise html2canvas via rails-assets avec gem 'rails-assets-html2canvas et le fichier bower.json :

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

D'après ce que je vois sur https://rails-assets.org/components, seules les versions <= 0.4.1 sont disponibles pour rails-assets. J'ai donc simplement ajouté le dernier dist / html2canvas.js à mon dossier app/assets/javascripts/vendor/ et je vais l'utiliser comme ça pour le moment. Merci d'avoir créé cette bibliothèque incroyablement utile!

@sweetleon Essayez d'échanger votre fichier html2canvas.js pour celui que j'ai modifié ici. Cela a fonctionné pour moi.

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

@sweetleon Oh tant pis, vous avez déjà trouvé une solution de contournement ;-)

J'ai le même problème

Le problème avec fontawesome se produit toujours dans la version 'html2canvas 1.0.0-alpha.12'

Toute solution? Merci

Le problème avec fontawesome se produit toujours dans la version 'html2canvas 1.0.0-rc.5