いくつかの要素で便利なdata-html2canvas-ignore
タグを使用していますが、Firefoxではマージンが負の要素で問題が発生しています。 data-html2canvas-style="margin-left: 0"
など、特定の要素にhtml2canvasのみのスタイルタグを追加できるようにしたいと思います。
他の誰かがこのようなことをする運がありましたか?
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');
...
});
最も参考になるコメント
onclone
オプションを使用してレンダリングされるドキュメント(オリジナルのクローン)のコンテンツを変更できます。次に例を示します。