アルファをサポートしていないブラウザを使用して、結果の違いをプレビューする

M66 2025-05-20

PHPを使用して画像を処理する場合、GDライブラリのImageColorallocatealpha（）関数を使用して、アルファ（透明性）チャネルで色を割り当てることがよくあります。その構文は次のとおりです。

 int imagecolorallocatealpha ( resource $image , int $red , int $green , int $blue , int $alpha )

ここで、 $ alphaの値は0（完全に不透明）から127（完全に透明）の範囲です。

しかし、問題は、サーバー側にアルファチャネルを使用してPNG画像を生成し、いくつかの古いブラウザー（初期IEバージョンなど）またはアルファレンダリングをサポートしない環境で生成したとしても、ユーザーが見ている効果は、透明な部分が灰色または黒であるか、正常に表示することはできません。

サーバー側のPHPコードを使用してこのプレビュー効果を改善して、Alphaをサポートしていないブラウザでさえ、少なくとも許容可能な優雅な劣化を見ることができるようにするにはどうすればよいですか？

核となるアイデア

この問題を解決するための鍵は次のとおりです。
AlphaチャネルでPNG画像を生成している間、アルファをサポートしていないブラウザー用に「タイル張り」の背景を備えた追加の画像が生成されます。

言い換えれば、 ImageColorallocatealpha（）に色を割り当てるとき、透明性を削除し、背景を直接組み合わせるバージョンも検討します。

コードの例

次の例は、PHP GDライブラリを使用して2つの画像を生成する方法を示しています。1つはAlphaチャネルを保持するPNG、もう1つは透明性をサポートしないブラウザー用の白い背景で合成される通常のPNGです。

 <?php
// キャンバスを作成します
$width = 300;
$height = 100;
$image = imagecreatetruecolor($width, $height);

// 開ける alpha チャネル保存
imagesavealpha($image, true);

// 完全に透明な背景色を割り当てます
$transparent = imagecolorallocatealpha($image, 0, 0, 0, 127);
imagefill($image, 0, 0, $transparent);

// 半透明の赤を割り当てます
$redAlpha = imagecolorallocatealpha($image, 255, 0, 0, 63); // 50% 透明

// 半透明の長方形を描きます
imagefilledrectangle($image, 50, 25, 250, 75, $redAlpha);

// ベルトを保存します alpha の PNG
imagepng($image, 'output_with_alpha.png');

// --------- 生成する alpha の版本 ---------

// 白い背景にキャンバスを作成します
$background = imagecreatetruecolor($width, $height);
$white = imagecolorallocate($background, 255, 255, 255);
imagefill($background, 0, 0, $white);

// 白い背景に透明な画像をコピーします（取り除く alpha）
imagecopy($background, $image, 0, 0, 0, 0, $width, $height);

// 保存 alpha の PNG
imagepng($background, 'output_no_alpha.png');

// メモリをきれいにします
imagedestroy($image);
imagedestroy($background);

echo '画像生成が完了しました：<a href="https://m66.net/output_with_alpha.png">透明チャネル付き</a> そして <a href="https://m66.net/output_no_alpha.png">透明なバージョンはありません</a>';
?>

コアステップの説明

1 ??アルファ<br>で色を割り当てます ImageColorallocatealpha（）を使用して、透明または半透明の部分を色付けします。

2 ??アルファ<br>をサポートするブラウザのメイン画像を生成します この部分はPNGとして保存されており、最新のブラウザでサポートできます。

3 ??アルファ<br>をサポートしていないブラウザの劣化図を生成します 白または他の背景を持つキャンバスを作成し、メイン画像を直接コピーして、透明な部分がしっかりした背景になるようにします。

4 ??フロントエンドの選択的負荷<br> JavaScriptを使用して、Alpha PNGがWebページでサポートされているかどうかを検出するか、ユーザーが選択できる2つのダウンロードリンクを直接提供できます。

imagecolorallocatealpha