WEB上の決まった領域を１枚の画像として作成できるJavascriptのライブラリ（html2canvas）を紹介しましたが、進めていく中で１つ問題が発生しました。

通常にスクリーンショットを撮るだけであれば問題ないのでしょうが、今回はスクリーンショットを撮る領域のパーツにCSS：mix-blend-modeを適用しており、html2canvasはmix-blend-modeに非対応だったようです。

どうしてもこのCSS実装は必須であったので、調べたところ他でも同じような状況に陥っている方もいるようで、実装できるように改善がされていました。

<script src=”https://cdn.jsdelivr.net/npm/html2canvas-add-mix-blend-mode@1.4.1/dist/html2canvas.min.js”></script>

をhtmlファイルへ追加するだけで良いとのことです。早速試してみたら、しっかりとmix-blend-modeが反映されており、めでたく問題が解決されました。