あまり日本語での情報がないので解決に四苦八苦しましたが、有用な記事を発見。
↓参考にさせていただきました。
https://qiita.com/Kengo2003/items/74eeeebbb3111f6dbbc3
画面上に表示されているものを画像として保存したいときに使用するライブラリですが、基本は以下をhead内に書いておけば利用できます。
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>ですが、公式のこのライブラリでは、文字色や背景色の指定をカラーコードやrgbで記述しないといけないみたいで、tailwindCSS4で利用されているoklchには非対応のようです。
そこでどうするかというと読み込んでいるライブラリを以下に変更するだけです。
<script src="https://cdn.jsdelivr.net/npm/html2canvas-pro@1.5.11/dist/html2canvas-pro.min.js"></script>chatGPT先生曰く公式と比べると以下のメリットがあるようです。
| 機能対応 | html2canvas 1.4.x | html2canvas-pro 1.5.x |
|---|---|---|
oklch() のサポート | ❌ 非対応 | ✅ 対応済み |
lch() / lab() 色 | ❌ 未定義 | ✅ 対応済み |
| グラデーション + filter 対応 | △ 一部 | ✅ より正確 |
| テキスト描画品質 | △ やや甘い | ✅ 改善されている |
https://www.npmjs.com/package/html2canvas-pro
ひとまずこれでコードの変更なしにhtml2canvasが使えそうです。