Html2canvas: Chrome / Chromiumの異常な文字間隔

文字間隔（この場合は単語間隔）は実際には正しいように見えますが、正しくないように見えるのはフォントファミリーです。 どのバージョンのhtml2canvasを使用していますか？ jsfiddleで問題を再現できますか？

編集：letterRenderingを使用すると、前述のようにレンダリングが異なるはずです。

お返事をありがとうございます、

私はバージョン0.5.0-beta4ます。

作業間隔が正しく見えるとはどういう意味ですか？ 私が共有した最初の写真を参照していますか？ フォントは単語間にそのような間隔を作りますか？

私が使用していることに注意してくださいCodeMirrorを：レンダリングされたテキストエディタ、特に角度ラッパーにNG2-codemirror 。

私はここで問題を再現しようとしましたが無駄になり

FirefoxとChromeでも同じ問題が見つかりました。 テキストに文字間隔のcssルールがある場合、各単語間に大きなギャップがあるテキストがレンダリングされます。 これは、バージョン0.4.1ではそうではなく、テキストを完全にレンダリングするために使用されていましたが、疑似要素がありませんでした（：before：after）

letter-spacingルールを削除すると、すべてが通常の状態に戻りますか？ コンポーネントのcssでもカスタムcode-mirrorのcssファイルでも使用していません。

はいCSSから文字間隔ルールを削除すると、問題は解消されます。 単語の間に大きなスペースはありません。 それは、それを台無しにしている文字間隔の部分でのページのレンダリングの何かです。

更新！ masterで最新のソースからライブラリを構築したところ、完全に機能します。 これまでのところ、すべてが本当に良さそうです。 以前は、v0.5.0-beta4リリースで試しました。

編集： Firefoxで1つの問題が見つかりました。 背景-画像がテキストにクリップされていない場合
-webkit-background-clip：テキスト;
-webkit-text-fill-color：透明;
使用されています。
ただし、Chromeではうまく機能します。

CSSでletter-spacingプロパティを使用していませんが、問題は引き続き発生します。 私はv0.5.0-beta4います。

最新のマスターソースからビルドしてみてください。

完了しましたが、これで問題が解決するわけではありませんが、表示は同じままです。

https://github.com/niklasvh/html2canvas/commit/77d258f1d8eeccf7e38235463a293b512c1ca3d0で修正する必要があり

問題は次のように続くようです：

要素をレンダリングした方法は次のとおりです。

html2canvas(document.body).then(function(canvas) {      
      document.body.appendChild(canvas);
});    

あなたが言及した最新のプレリリースバージョンをダウンロードし、古いバージョンを置き換えました。

@christopherkadeは、オプションletterRendering: trueを設定すると、修正されますか？

残念ながらそうではありません、これが私がそれをする方法です：

let element = document.getElementById('console');
const options = {
  letterRendering: true
};

html2canvas(element, options).then(function(canvas) {      
  document.body.appendChild(canvas);

  var url = canvas.toDataURL();
  var img = '<img src="' + url + '" style="border:0;"></img>'
  var x = window.open();
  x.document.open();
  x.document.write(img);
  x.document.close();
});

リポジトリにある例を試してみても同じ結果です。

私はこの問題の回避策を見つけました（そしてそれはあまりきれいではありません）：

// Package used to detect the browser used by the user
const browser = detect();
const element = document.getElementById('console');

// Set up my options
let options = {};
// For some reason foreignObjectRendering solves the spacing issue on Chrome but gives an error on Firefox, so I detect the browser and apply the adequate options.
if (browser && browser.name === 'chrome') {      
  options = {
    useCORS: true,
    foreignObjectRendering: true
  };  
}

// Open the canvas in a new window
html2canvas(element, options).then(function(canvas) {
  const url = canvas.toDataURL();
  const img = '<img src="' + url + '" style="border:0;"></img>'
  const x = window.open();
  x.document.open();
  x.document.write(img);
  x.document.close();
});

2番目のオプションを使用したときにFirefoxで発生するエラーは次のとおりです。

Uncaught（in promise）：[Exception ... \ "Method notimplemented \"..。

同じ問題!!

ここでは、HTML本文からCSS属性font-variant-numeric：proportional-numsを削除することで解決しました。

font-variant: tabular-nums; （ in antd.css ）の削除に関する同様の問題を修正しました

アラビア語で同じ問題がありますか？

@mohafouad +1

これに対する修正を見つけましたか？ ありがとうございました。

@2xSamurai no :(

スクリーンショットを撮りたいdivに移動してこれを修正し、「 font-variant: normal; 」を設定しました。これでうまくいきました。

コンテンツ全体の外部divにfont-variant: normal !importantを追加すると修正されました（antdプロジェクト内）

同じ問題、私を夢中にさせた

font-variant：normal！importantが機能しない

@ Malarkey-Jhuと@maaouiの答えが私の問題を解決しました。

私が抱えていた問題：フォントファミリーが機能せず、間隔が非常に不安定でした。 時々私は重複する文字を持っているでしょう。

私が行うこと：エクスポート中に、テキストを含む要素でelement.style.setProperty（ 'font-variant'、 'normal'）を呼び出します。これにより、font-familyが正しく表示され、間隔がすべて不安定にならないようになります。 。 次に、エクスポートが終了したら、そのプロパティを削除します。

上記の解決策に基づいて、codemirror cssファイルの-webkit-font-variant-ligaturesとfont-variant-ligaturesをnormalに変更することで、この問題を修正しました。 CodeMirrorバージョン5.42.2ます。