HTML2CanvasでSafariのプライベ
ートブラウズ画面をキャプチャしたと
きに背景色が半透明になる？

by
  • Safariでは、HTML2Canvasを使用すると背景色が半透明になる問題が発生します。
  • この問題は、ブラウザの色の解釈の違いやCSS変数の扱い方の違いが原因です。
  • 解決するには、背景色を直接指定し、JavaScript側で適切な設定を行うと効果的です。

関連記事

1. HTML2Canvasで保存した画像の色が薄い？

ウェブページの一部を画像として保存したいとき、HTML2Canvasというツールを使うことがあります。このツールは、ウェブページの一部を画像に変換してくれる便利なものです。しかし、Safariというブラウザを使っていると、背景色が半透明になってしまうという問題が起きることがあります。

2. なぜSafariでは背景色が半透明になるの？

Safariは、AppleのパソコンやiPhoneでよく使われるウェブブラウザです。このSafariでHTML2Canvasを使うと、背景色が半透明になってしまう問題には、主に2つの原因があります。

まず1つ目は、「ブラウザによる色の解釈の違い」です。SafariはWebKitというシステムを使っていて、透明な部分を他のブラウザとは少し違う方法で処理します。透明なはずの部分を、薄い白色として表示してしまうことがあるのです。

2つ目は、「CSS変数の扱い方の違い」です。CSS変数とは、ウェブサイトのデザインで使う色やサイズなどの値を、名前をつけて保存しておくものです。Safariではこの変数の値が正しく計算されないことがあります。

3. 解決方法：背景色をはっきり指定しよう

この問題を解決するには、いくつかの方法があります。一番簡単なのは、背景色を直接指定する方法です。

.container {
  background: #A8D8FF !important;
}
Code language: CSS (css)

このように、CSS変数を使わず直接色を指定することで、Safariでも正しく表示されるようになります。また、JavaScript側でも設定を追加します。

html2canvas(element, {
  backgroundColor: '#FFFFFF', // 白背景を強制的に設定
  useCORS: true // 外部の画像などを読み込めるようにする
});
Code language: CSS (css)

4. プライベートブラウズモードでの問題

Safariには「プライベートブラウズモード」という、閲覧履歴などを残さないモードがあります。このモードでは、さらに問題が複雑になります。

プライベートモードでは、セキュリティが強化されているため、通常のモードよりも制限が多くなります。例えば、ウェブサイトがデータを一時的に保存する機能が制限されているため、CSS変数の計算結果が通常と異なることがあります。

また、「トラッカー防止機能」という、ウェブサイトがあなたを追跡するのを防ぐ機能が働いています。この機能が、画像の読み込みにも影響を与えることがあるのです。

5. プライベートモードでの解決方法

プライベートモードでの問題を解決するには、次のような方法があります。

まず、CSS側で背景色を強制的に設定します。

.element {
  background: #A8D8FF !important;
  position: relative;
}
Code language: CSS (css)

次に、JavaScript側でも細かい設定を行います。

html2canvas(element, {
  useCORS: true,
  backgroundColor: '#FFFFFF',
  logging: true,
  imageTimeout: 0,
  onclone: (clonedDoc) => {
    clonedDoc.documentElement.style.setProperty(
      '--appointment-color-0', 
      '#A8D8FF'
    )
  }
});
Code language: CSS (css)

この設定では、画像を作る前に背景色を再設定しています。これにより、プライベートモードでも正しく表示されるようになります。

6. まとめ

Safariで画面をキャプチャしたときに背景色が半透明になる問題は、ブラウザの仕組みの違いによるものです。背景色を直接指定したり、JavaScript側で細かい設定をしたりすることで解決できます。

特に、プライベートブラウズモードを使っている場合は、セキュリティ機能の影響もあるので、より細かい対応が必要になります。Safari 17以降では、imageTimeout: 0という設定も重要です。

これらの対策を試してみると、Safariでも他のブラウザと同じようにきれいな背景色でキャプチャできるようになりますよ。