modern-screenshotで画像が表示されない場合の対処法

状況

modern-screenshotを使って画像を生成すると、imgタグの画像が表示されずに画像が生成されてしまう。

動作環境

iOS 17.5.1 / Google Chrome

結論

画像を生成する前に、何度か画像を生成する。

// 何度か画像を生成する
await domToPng(element);
await domToPng(element);

const dataUrl = await domToPng(element);
const link = document.createElement("a");
link.href = dataUrl;
link.download = filename;
link.click();

説明

modern-screenshotは、ブラウザ環境次第で画像の読み込みを待たずに画像を生成してしまう場合があるようです。
そのため、画像を生成する前に何度か画像を生成することで、内部的に画像がキャッシュされて？画像を読み込むことができるようになります。

自身の場合は、予め一度だけ画像を生成することで画像が表示できるようになりました。

備考

画像が表示されない問題は、こちらのIssueで議論されています👇
今回の対処法はこちらに上がっていたものです。

issue自体はhtml-to-imageのものですが、modern-screenshotがhtml-to-imageのforkなので同様の問題だと思われます。