要求事項の説明
フロントエンドは、写真のリストをスプライシング学生によると、背景イメージは、バックエンドのインターフェイスが動的に取得され、学生リストの数は、イメージの幅を変更しない場合には、可変であり、イメージの高さは、動的に学生の数と変更することであり、イメージが引き伸ばされ、変形することはできません
イメージのスティッチングスキームは以下のように設計されています。
真ん中の緑の部分は、学生のリスト、ダイナミックレンダリングリストのリストであり、真ん中にも背景を持って、それはCSSの背景を介しています：url（）この属性を繰り返し、コンテンツの真ん中に1ピクセルの背景イメージrepeat布は、最終的に生成されたサンプルイメージを次のポストそれ！
問題点
ページの見えない要素をイメージにする方法
html2canvasは、ページ上でレンダリングされたhtml要素をイメージに変換することしかできません。
- 解決策：イメージを-19999pxまで引っ張り、イメージが可視エリアに入らないようにして、隠し要素の目的を達成します。
//
.poster-download-unsee {
margin-top: -px; // ページ内要素が見えない
position: fixed; // ドキュメントフローから抜け出す
}
ナロースクリーンブラウザでスクロールバーが表示される場合、htmlに変換されたイメージは白い画面、または白いエッジとして表示されます。
解決策：知るためのアクセスを介して、白いエッジは、主にスクロールバーが現れたため、ソリューションのアイデア：イメージを有効にするhtml2canvasを使用して、現在のscrollLeft距離の最初のレコードは、その後、ブラウザの左側からの距離にスクロールし、場所に戻るの成功を有効にするイメージであること！
// セブンブルズクラウドにアップロードする
const imgWrap = document.getElementById(id);
const { scrollLeft } = document.documentElement;
// まずページの左側に水平にスクロールする
window.scroll(0, 0);
const canvas = await html2canvas(imgWrap, {
useCORS: true,
backgroundColor: null,
// logging: isDevMode(),
allowTaint: false });
// オリジナルに水平にスクロールする
window.scroll(scrollLeft, 0);
背景イメージ1pxエラー、キャンバスの高さが0になります。
最終的にソースコードの問題点を突き止めると、高さ1pxのイメージが、キャンバスを介して画面のピクセル比率を2で割ることによって、不可解にも0になります。
アイデア: キャンバスの高さが0にならないように、UIが4pxの背景イメージをカットし直します！
