현재 위치: > 최신 기사 목록> 알파를 지원하지 않는 브라우저를 사용하여 결과의 ​​차이를 미리보기

알파를 지원하지 않는 브라우저를 사용하여 결과의 ​​차이를 미리보기

M66 2025-05-20

PHP를 사용하여 이미지를 처리 ​​할 때 GD 라이브러리의 imagecolorallocatealpha () 함수를 사용하여 알파 (투명성) 채널을 사용하여 색상을 할당합니다. 구문은 다음과 같습니다.

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

여기서 $ alpha 의 값은 0 (완전히 불투명)에서 127 (완전히 투명) 범위입니다.

그러나 문제는 다음과 같습니다. 서버쪽에 알파 채널이있는 PNG 이미지를 생성하더라도 일부 오래된 브라우저 (예 : 초기 IE 버전) 또는 알파 렌더링을 지원하지 않는 일부 환경에서는 사용자가 보는 효과가 여전히 다르 든 투명 부분이 회색 또는 검은 색이거나 정상적으로 표시 될 수 없습니다.

그렇다면 Alpha를 지원하지 않는 브라우저조차도 적어도 허용 가능한 우아한 열화를 볼 수 있도록 서버 측에서 PHP 코드를 사용 하여이 미리보기 효과를 어떻게 개선 할 수 있습니까?

핵심 아이디어

이 문제를 해결하는 열쇠는 다음과 같습니다.
알파 채널을 사용하여 PNG 이미지를 생성하는 동안 알파를 지원하지 않는 브라우저에 "타일"배경이있는 추가 이미지가 생성됩니다.

다시 말해, imagecolorallocatealpha () 로 색상을 할당 할 때 투명성을 제거하고 배경을 직접 결합하는 버전도 고려합니다.

코드 예제

다음 예제는 PHP GD 라이브러리를 사용하여 두 가지 이미지를 생성하는 방법을 보여줍니다. 하나는 알파 채널을 유지하는 하나의 PNG와 다른 하나는 투명도를 지원하지 않는 브라우저의 흰색 배경으로 합성되는 정상적인 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 ?? Alpha <br>을 지원하는 브라우저의 기본 이미지를 생성하십시오 이 부분은 PNG로 저장되며 최신 브라우저에서 지원할 수 있습니다.

3 ???? 알파를 지원하지 않는 브라우저의 저하 다이어그램 생성 <br> 흰색 또는 기타 배경으로 캔버스를 만들고 기본 이미지를 직접 복사하여 투명 부분이 견고한 배경이됩니다.

4 ?? 프론트 엔드의 선택적 하중 <br> JavaScript를 사용하여 웹 페이지에서 Alpha PNG가 지원되는지 여부를 감지하거나 사용자가 선택할 수있는 두 개의 다운로드 링크를 직접 제공 할 수 있습니다.