Html2canvas: FontAwesomeアイコンはFirefoxのみでレンダリングされません

jsfiddleで例を設定できますか？

http://jsfiddle.net/3ub69/

カスタムアイコンフォントで同じ問題が発生しました。 SafariとChromeでは機能しますが、FirefoxとIEでは機能しません。

少し掘り下げて、Firefox26とIE11で動作するようにしました。問題は次の行です。

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

なぜそれが起こっているのかを説明しようと思います。 私の仮定のいくつかは間違っているかもしれないので、遠慮なく私を訂正してください。

非Webkitbrowserでは、getComputedStylesによって返されるオブジェクトは、オブジェクトに数値プロパティ{ 0: 'fontFamily' }を設定し、プロトタイプにキー値のペア{ fontFamily: 'fontawesome' }を設定するだけのようです。 Object.keysはObject.hasOwnProperty for inループのように機能するため、値のペアが省略されているため、cssスタイルはコピーされていないようです。

これを修正するには、 Object.keys() 、filterメソッド、forEachメソッドを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]);
    }
  }
}

prop !== 'cssText'チェックしている理由は、Firefoxでは常に空の文字列であるためです（バグ？）。 その空の文字列を疑似要素にコピーすると、fontFamilyが再びリセットされるようです。

お役に立てれば。

@Enomeこれは非常に良いですが、まだテストしていませんが、「プルリクエスト」を送信してください。

ありがとう！ ：+1：

@Enomeは、このトピックについてプルリクエストを行ったことがありますか？ 私は現在、回避策として彼のコードを使用しています。

@fpslaterプルリクエストをしたことはありません。 正しく覚えていれば、html-> canvasの変換をやめ、代わりにsvgを使い始めました。

FontAwesomeは、ChromeやPhantomJSなどのWebkitブラウザーでもレンダリングできません。

@kmdavis html2canvas v0.5を試しましたか？

現在、html2canvasv0.5.0-alphaを使用しています

問題を再現できるjsfiddleの簡単な例を提供していただけますか、それともhttp://jsfiddle.net/3ub69/52/が機能しませんか？

私もこの問題を抱えています。 html2canvas v0.5にアップグレードするにはどうすればよいですか？ これを尋ねるのはばかげていると思いますが、このリポジトリにはそのようなブランチやタグはありません。

前もって感謝します。

PS私はrails-assets経由でhtml2canvasをgem 'rails-assets-html2canvasと次のbower.jsonファイルで使用しています：

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

https://rails-assets.org/componentsで確認したところ、rails-assetsで使用できるのはバージョン<= 0.4.1のみです。 そのため、最新のdist /html2canvas.jsをapp/assets/javascripts/vendor/フォルダーに追加しただけで、当面はそのように使用します。 この信じられないほど便利なライブラリを作ってくれてありがとう！

@sweetleon html2canvas.jsファイルをここで変更したファイルと交換してみてください。 それは私のために働いた。

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

@sweetleonああ、気にしないでください、あなたはすでに回避策を見つけました;-)

私は同じ問題を抱えています

fontawesomeの問題は、バージョン 'html2canvas1.0.0-alpha.12'でも発生します

解決策はありますか？ ありがとう

fontawesomeの問題は、バージョン 'html2canvas1.0.0-rc.5でも発生します。