Lorsque nous utilisons PHP pour traiter les images, nous utilisons souvent la fonction ImageColorAllocatEalpha () dans la bibliothèque GD pour attribuer des couleurs avec des canaux alpha (transparence). Sa syntaxe est la suivante:
int imagecolorallocatealpha ( resource $image , int $red , int $green , int $blue , int $alpha )
Où la valeur de $ alpha varie de 0 (complètement opaque) à 127 (complètement transparente).
Mais le problème est: même si nous générons des images PNG avec un canal alpha du côté du serveur, dans certains anciens navigateurs (comme les versions IE plus tôt) ou dans certains environnements qui ne prennent pas en charge le rendu alpha, les effets que les utilisateurs voient diffèrent toujours, tels que la partie transparente est gris ou noir, ou il ne peut pas être affiché normalement.
Alors, comment pouvons-nous améliorer cet effet d'aperçu en utilisant le code PHP côté serveur afin que même les navigateurs qui ne prennent pas en charge Alpha puissent au moins voir une dégradation gracieuse acceptable?
La clé pour résoudre ce problème est:
Lors de la génération d'images PNG avec un canal alpha, une image supplémentaire avec un arrière-plan "carrelé" est générée pour les navigateurs qui ne prennent pas en charge Alpha.
En d'autres termes, lorsque nous attribuons des couleurs avec ImageColorAllocatealPha () , nous considérons également une version qui supprime la transparence et combine directement l'arrière-plan.
L'exemple suivant montre comment utiliser la bibliothèque PHP GD pour générer deux images: une PNG qui conserve le canal alpha, et l'autre est une PNG normale qui est synthétisée avec un fond blanc pour les navigateurs qui ne prennent pas en charge la transparence.
<?php
// Créer une toile
$width = 300;
$height = 100;
$image = imagecreatetruecolor($width, $height);
// Ouvrir alpha Économie de canal
imagesavealpha($image, true);
// Attribuer une couleur d'arrière-plan complètement transparente
$transparent = imagecolorallocatealpha($image, 0, 0, 0, 127);
imagefill($image, 0, 0, $transparent);
// Attribuer un rouge translucide
$redAlpha = imagecolorallocatealpha($image, 255, 0, 0, 63); // 50% transparent
// 画一个半transparent矩形
imagefilledrectangle($image, 50, 25, 250, 75, $redAlpha);
// Sauvegarder la ceinture alpha de PNG
imagepng($image, 'output_with_alpha.png');
// --------- Générer alpha de版本 ---------
// Créer une toile sur fond blanc
$background = imagecreatetruecolor($width, $height);
$white = imagecolorallocate($background, 255, 255, 255);
imagefill($background, 0, 0, $white);
// 将transparent图片拷贝到白色背景上(Retirer alpha)
imagecopy($background, $image, 0, 0, 0, 0, $width, $height);
// Sauvegarder alpha de PNG
imagepng($background, 'output_no_alpha.png');
// Nettoyez la mémoire
imagedestroy($image);
imagedestroy($background);
echo 'La génération d'images est terminée:<a href="https://m66.net/output_with_alpha.png">带transparent通道</a> et <a href="https://m66.net/output_no_alpha.png">无transparent版本</a>';
?>
1 ?? Attribuer des couleurs avec alpha <br> Utilisez ImageColorAllocatEalpha () pour colorer les parties transparentes ou semi-transparentes.
2 ?? Générez l'image principale des navigateurs qui prennent en charge Alpha <br> Cette partie est juste enregistrée en PNG, et elle peut être prise en charge par des navigateurs modernes.
3 ?? Générer des diagrammes de dégradation pour les navigateurs qui ne prennent pas en charge alpha <br> Créez une toile avec un fond blanc ou autre et copiez directement l'image principale, afin que la partie transparente devienne un fond solide.
4 ?? Charge sélective de la fin avant <br> Vous pouvez utiliser JavaScript pour détecter si Alpha PNG est pris en charge sur la page Web, ou fournir directement deux liens de téléchargement parmi lesquels les utilisateurs peuvent choisir.