Html2canvas: FontAwesome-Symbole werden nicht nur in Firefox gerendert

Erstellt am 18. Dez. 2013  ·  20Kommentare  ·  Quelle: niklasvh/html2canvas

FontAwesome http://fontawesome.io/ Symbole werden in Chrom, aber nicht in Firefox gut gerendert. Es wird nur eine Box gerendert.
rendering font awesome icons

Bug Firefox

Hilfreichster Kommentar

Das Problem mit fontawesome tritt immer noch in der Version 'html2canvas 1.0.0-alpha.12' auf.

Alle 20 Kommentare

Könnten Sie ein Beispiel für jsfiddle einrichten?

Stieß auf das gleiche Problem mit einer benutzerdefinierten Symbolschriftart. Es funktioniert in Safari und Chrome, aber nicht in Firefox und IE.

Habe ein bisschen gegraben und es in Firefox 26 und IE 11 zum Laufen gebracht. Das Problem ist die folgende Zeile:

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

Ich werde versuchen zu erklären, warum es passiert. Einige meiner Annahmen könnten falsch sein, also zögern Sie nicht, mich zu korrigieren.

Es scheint, dass in Nicht-Webkit-Browsern das von getComputedStyles zurückgegebene Objekt nur die numerischen Eigenschaften { 0: 'fontFamily' } für das Objekt und die Schlüsselwertpaare { fontFamily: 'fontawesome' } für den Prototyp festlegt. Da Object.keys wie eine for in -Schleife mit Object.hasOwnProperty funktioniert, werden die Wertepaare weggelassen, sodass anscheinend kein CSS-Stil kopiert wird.

Um dies zu beheben, können Sie die Object.keys() , die Filtermethode und die forEach-Methode durch eine for in -Schleife ersetzen.

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]);
    }
  }
}

Der Grund, warum ich prop !== 'cssText' überprüfe, ist, dass es in Firefox immer eine leere Zeichenfolge ist (Fehler?). Wenn Sie diese leere Zeichenfolge in das Pseudoelement kopieren, wird fontFamily anscheinend erneut zurückgesetzt.

Hoffe das hilft.

@Enome das ist sehr gut, obwohl ich noch nicht getestet habe, bitte senden Sie eine "Pull Request".

Vielen Dank! : +1:

Hat @Enome jemals eine Pull-Anfrage zu diesem Thema gestellt? Ich verwende derzeit seinen Code als Problemumgehung.

@fpslater Ich habe nie eine Pull-Anfrage gestellt. Wenn ich mich richtig erinnere, habe ich nicht mehr versucht, HTML -> Zeichenfläche zu konvertieren, sondern stattdessen SVG verwendet.

FontAwesome kann für mich auch in Webkit-Browsern wie Chrome und PhantomJS nicht gerendert werden

@kmdavis Haben Sie versucht, html2canvas v0.5?

Wir verwenden derzeit html2canvas v0.5.0-alpha

Könnten Sie ein einfaches Beispiel für jsfiddle angeben, in dem das Problem repliziert werden kann, oder funktioniert http://jsfiddle.net/3ub69/52/ bei Ihnen nicht?

Ich habe auch dieses Problem. Wie aktualisiere ich auf html2canvas v0.5? Ich fühle mich albern, wenn ich das frage, aber ich sehe keinen solchen Zweig oder Tag auf diesem Repo.

Danke im Voraus.

PS Ich verwende html2canvas über Rails-Assets mit gem 'rails-assets-html2canvas und der folgenden bower.json -Datei:

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

Nach dem, was ich unter https://rails-assets.org/components sehe, sind nur Versionen <= 0.4.1 für Rails-Assets verfügbar. Also habe ich einfach die neueste Datei dist / html2canvas.js zu meinem Ordner app/assets/javascripts/vendor/ hinzugefügt und werde sie vorerst so verwenden. Vielen Dank, dass Sie diese unglaublich nützliche Bibliothek erstellt haben!

@sweetleon Tauschen Sie Ihre html2canvas.js -Datei gegen die aus, die ich hier geändert habe. Es hat bei mir funktioniert.

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

@sweetleon Oh egal, du hast bereits eine

Ich habe das gleiche Problem

Das Problem mit fontawesome tritt immer noch in der Version 'html2canvas 1.0.0-alpha.12' auf.

Irgendeine Lösung? Vielen Dank

Das Problem mit fontawesome tritt immer noch in der Version 'html2canvas 1.0.0-rc.5 auf

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen