Html2canvas: html2canvas専用の要素スタイリング?

作成日 2015年10月19日  ·  5コメント  ·  ソース: niklasvh/html2canvas

いくつかの要素で便利なdata-html2canvas-ignoreタグを使用していますが、Firefoxではマージンが負の要素で問題が発生しています。 data-html2canvas-style="margin-left: 0"など、特定の要素にhtml2canvasのみのスタイルタグを追加できるようにしたいと思います。

他の誰かがこのようなことをする運がありましたか?

Question

最も参考になるコメント

oncloneオプションを使用してレンダリングされるドキュメント(オリジナルのクローン)のコンテンツを変更できます。次に例を示します。

html2canvas(document.body, {onclone: function(document) {
  document.querySelector('.something').style.marginLeft = 0;
}}).then(...)

全てのコメント5件

oncloneオプションを使用してレンダリングされるドキュメント(オリジナルのクローン)のコンテンツを変更できます。次に例を示します。

html2canvas(document.body, {onclone: function(document) {
  document.querySelector('.something').style.marginLeft = 0;
}}).then(...)

ありがとうニック! このライブラリでの作業に感謝します。 これはドキュメントにありますか?

残念ながら、そうではありません。 現時点では、ドキュメントは多くの点で大幅に不足しています...

ダウンロードした画像が適切なスタイルになっていないため、 computed-style-to-inline-styleを使用して、すべてのスタイルをインラインcssに変換して適切にレンダリングしています。 しかし、それに関する問題は、それが元のdomに影響を与えているということです。 そのため、onclone関数内ではなく、cloneされた要素に対してこれを実行したいのですが、機能せず、画像のスタイルが適切ではありません。 なぜそれが起こっているのか考えはありますか?

私は同じことをしようとしました、これが私がそれを実装した方法であり、私のすべてのスタイルが適切にダウンロードされました:

const computedStyleToInlineStyle = require("computed-style-to-inline-style");

 html2canvas(document.querySelector(".someclass"), {onclone: function(document) {
     computedStyleToInlineStyle(document.querySelector(".someclass"), {
          recursive: true
      });
    }}).then(canvas => {
        const imgData = canvas.toDataURL('image/png');
        ...
    });
このページは役に立ちましたか?
0 / 5 - 0 評価