html2canvasで生成された画像のオフセットが不完全な場合の対処法

シナリオ1

問題の背景：生成された画像はポップアップウィンドウ内にあり、ページにスクロールバーがない場合は正常ですが、スクロールバーがあり、ページがスクロールすると、html2canvas で描画した画像は以下のようにスクロール高さに応じた白い枠でオフセットされます。

ソリューション : その

オーナーは、この問題を解決するために、多くの情報をチェックし、多くの方法を使いました。悔しさのあまり、html2canvas の設定パラメータを調べることを計画し、予想通り、設定パラメータ RenderOptions に以下の設定があることを発見しました。

鋭い目をしたオーナーは、すぐにscrollYの件に気づきました。そうだ、これは設定のオフセットに違いない、そうだろう？私のページがスクロールダウンする高さをオフセットしているのだから、それならscrollYをマイナスに設定すればいいのだ。そこでオーナーが設定したのは {scrollY: -window.pageYOffset} を実行すると、次のように、下にシフトするのではなく、上にシフトし始めるという奇妙なことが起こります。

<イグ

世の中はどうなっているのか、だからオーナーはもうひとつ設定した {scrollY: 0} と言って、もう一度見てみると、解決していました。

その理由は、scrollY を設定しないと、canvas がページを描画し、グローバルなページスクロールに基づいて自動的に下に移動するためであることが判明しています。もちろん、scrollX でも同じことが起こります。

コードを表示させました。

scrollY: 0, 状況に応じた他のパラメータ、このパラメータが欠落してはいけません。

var htmlDom = document.getElementsByClassName('dialog_content')[0];

html2canvas(htmlDom, {
    logging: false, //Logging switch for viewing the internal execution flow of html2canvas
    width: htmlDom.clientWidth, //dom original width
    height: htmlDom.clientHeight,
    scrollY: 0, 
    scrollX: 0,
    useCORS: true // [Important] Enable cross-domain configuration
}).then(canvas => {
    var url = canvas.toDataURL();// image address
    htmlDom.appendChild(canvas);
});

シナリオ2

html2canvas で画像を描画すると、必ずオフセット距離が発生するため、以前の解決策では scrollY: 0,scrollX: 0 この2つのパラメータは0なのですが、今回はうまくいかず、最終的にtransform:translateX(-50%)というスタイルでボックスが描かれていることが原因だとわかりました。

回避策

ユーザーが描いた領域をtransformで位置決めするのではなく、パーセンテージを設定したり、幅と高さを固定するなど、オフセットがない方法に切り替えます。

html2canvasで生成された画像のオフセットが不完全な場合の解決方法については以上です。html2canvasで生成した画像のオフセットについては、Script Houseの過去記事を検索していただくか、引き続き以下の関連記事をご覧ください。