html-to-imageで、はみ出している横長の要素でも画像化する方法

やりたいこと

HTML で記述された要素を画像化することができる JS 製のパッケージである html-to-image ですが、横方向は基本的に画面に表示されている部分しか画像化することができません。
よって、横スクロールが可能な長い要素などは、一筋縄では画像化できないのです。

この記事では、以下の例のように横に長く、スクロールする形式の要素を画像化する方法を解説します。

👆 横方向にスクロールしてみてください

この表を普通にダウンロードさせると、以下のような悲惨な画像が出来上がります。

これでは全く実用的でないので、見切れずにダウンロードできるようにしてみます。

解決方法

まずは動作するデモを見てください。
✅ 見切れないようにダウンロード ボタンをクリックすると、以下のようなきれいに画像化された表がダウンロードできるはずです。

では、どのように実装すればよいのか解説します。

横スクロールできるようにしている、ということは以下のような CSS が当たっているはずです。

.wrapper {
  max-width: 100vw;
  overflow-x: auto;
}

これを、JS によって以下のように書き換えます。

.wrapper {
  max-width: none;
  overflow-x: visible;
}

また、追加でダウンロード部分に幅の設定を追加します。

await htmlToImage.toJpeg(wrapper, {
  width: wrapper.scrollWidth, // 👈
  canvasWidth: wrapper.scrollWidth, // 👈
  height: wrapper.scrollHeight, // 👈
  canvasHeight: wrapper.scrollHeight // 👈 この4行を追加
});

これだけ？感がありますが、これだけです。
簡単に対応できるので、ぜひやってみてください。

以上、html-to-image で、横にはみ出している要素でも画像化する方法でした。
お読みいただき、ありがとうございました。