Kirjautuminen

Haku

Tehtävät

Keskustelu: Koodit: PHP: Läpinäkyvä PNG-kuva GD-kirjastolla

Sivun loppuun

ajv [21.12.2004 14:30:56]

#

Joku aika sitten tarvitsin läpinäkyviä png-kuvia varsinaisten kuvien varjojen luomiseen. Koska kuvat olivat pöyreäreunaisia ja eri kokoisia, ei ollut muuta vaihtoehtoa kuin tehdä varjot dynaamisesti php:llä. Vaikka loppujen lopuksi koodi on todella yksinkertainen, kulutin päivän sen tekemiseen. Mistään ei oikeastaan löytynyt suoraa ohjetta, miten php:llä läpinäkyvän png:n luonti onnistuu. Loppujen lopuksi se oli kiinni vain kolmesta funktiosta: imagealphablending(), imagesavealpha() ja imagecolorallocatealpha().

Kuvan tekemisen lisäksi alla on käyttöesimerkki. IE:hän ei tunnetusti läpinäkyviä png-kuvia tue, joten sillä on turha esimerkkisivua mennä katsomaan. Toki IE:nkin saa näyttämään läpinäkyviä png-kuvia, mutta seurauksena saattaa olla muita paljon pahempia ongelmia (linkit ei toimi, tekstin valitseminen ei onnistu). Tästä virityksestä esimerkki css-tiedoston lopussa.

Ja esimerkit:
http://ajv.lautatarha.com/testing/alpha-esim.html
http://ajv.lautatarha.com/testing/alpha-png.php?x=100&y=100&o=100&color=000000

alpha-image.php

<?php

//kuvan koko, läpinäkyvyys ja väri voidaan antaa myös GET:llä
$width   = isset($_GET['x']) ? intval($_GET['x']) : 10;
$height  = isset($_GET['y']) ? intval($_GET['y']) : 10;
$opacity = isset($_GET['o']) ? intval($_GET['o']) : 80;
$r=204; $g=255; $b=255; //default rgb-arvot
if(isset($_GET['color'])){
   //tarkistetaan, että väri on validi
   if(ereg("([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})", $_GET['color'], $re)){
      $r=hexdec($re[1]); $g=hexdec($re[2]); $b=hexdec($re[3]);
   }
}

$im = imagecreatetruecolor($width,$height);
//imagealphablending on defaulttina päällä
//https://www.php.net/manual/en/function.imagealphablending.php
imagealphablending($im,false);
//https://www.php.net/manual/en/function.imagesavealpha.php
imagesavealpha($im,true);
//tehdään alphablendattu väri annetuilla parametreillä
$bg = imagecolorallocatealpha($im,$r,$g,$b,$opacity);
imagefilledrectangle($im, 0, 0,$width,$height,$bg);
header('Content-type: image/png');
imagepng($im);
imagedestroy($im);
?>

alpha-esim.html

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PNG-esimerkki</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fi" />
<link rel="stylesheet" type="text/css" href="alpha.css" />
</head>
<body>
<h1>Lorem ipsum</h1>
<p><b>Lorem ipsum</b> dolor sit amet, consectetuer adipiscing elit.
  Aenean tristique nulla quis metus. Nullam leo. Quisque lectus quam, vestibulum
  sit amet, elementum sit amet, dictum non, felis. Nunc dictum. Nunc pretium.
  Praesent et tortor.</p>
<ul class="navi">
  <li><a href="#">Link1</a></li>
  <li><a href="#">Link2</a></li>
  <li><a href="#">Link3</a></li>
</ul>
</body>
</html>

alpha.css

body{
   margin: 2em 1em 1em 10em;
   padding:0;
   background: url('img/bg.jpg') fixed left top no-repeat;
}
/*
IE ei ymmrrä position-määritteellä arvoa fixed eikä myöskään
osaa näyttää läpinäkyviä png-kuvia, joten määritetään positioksi
absolute ja taustaksi väri.
*/
ul.navi{
   background: transparent;
   font-size: 110%;
   font-weight: bold;
   line-height: 1.5;
   list-style: none;
   padding: 0;
   margin: 0;
   position: absolute;
   left: 0;
   top: 0;
   width: 7em;
   height: 100%;
   padding: 2em 0 0 1em;
}
/*
Käytetään IE:n CSS-tukemattomuutta höydyksi
IE ei ymmärrä body>ul.navi, mutta kaikki ns. "kunnon"
selaimet tämän ymmärtävät. Nyt laitetaan navi-laatikon
positioksi fixed ja taustaksi png-kuva
*/
body>ul.navi{
   position: fixed;
   background: url('alpha-png.php?color=0033FF&o=110');
   border-right: 1px solid #540000;
}
/* navigaatio-linkkien ympärille hieman tilaa */
ul.navi li{
   padding: 0.2em 0 0.2em 0;
}
ul.navi a{
   padding: 0 1.2em 0 1.2em;
}
/* (link, visited, hover, active) */
ul.navi a:link{
   text-decoration: none;
   color: #540000;
}
ul.navi a:visited{
   text-decoration: none;
   color: #540000;
}
ul.navi a:hover{
   /*background: url('img/grey12.jpg');*/
   color: red;
}
ul.navi a:active{
   text-decoration: none;
   color: #540000;
}
/*
Seuraavan hirvityksen IE ymmärtää, muut eivät ==> IE:lle kyky näyttää läpinäkyviä png-kuvia
Jos käytät, ota perusmäärittelyistä taustaväri pois

ul.navi{
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="alpha-png.php", sizingMethod="scale");
}
*/

ajv [21.12.2004 14:45:36]

#

Ja CSS-gurut saavat antaa CSS:stäkin palautetta, kiitos!

T.M. [21.12.2004 14:55:44]

# 

if(isset($_GET['color'])){
   //tarkistetaan, että väri on validi
   if(ereg("([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})", $_GET['color'], $r)){
      $r=hexdec($r[1]); $g=hexdec($r[2]); $b=hexdec($r[3]);
   }
}

Sinänsä turhaa tarkistaa onko se validi, kun hexdec() funktio muuttaa epävalidit heksa-arvot nolliksi.

makeuu [21.12.2004 20:13:44]

#

Aika näppärä

BlueByte [30.12.2004 15:13:44]

#

jea

dooDle [10.02.2005 16:37:04]

#

epävalid = invalid xD

Kenilworth [29.03.2007 11:51:41]

#

Jahas.

Malfunc [13.09.2007 14:38:21]

#

alpha-image.php? CSS:sä lukee kyllä alpha-png.php? Ja kannattaisi mainita, että kansioon kannattaa lisätä bg.jpg!

rax [02.06.2008 17:50:48]

#

Tjaa.. CSS -llä menis helpommin:

.logo {
opacity: .2;
}

Mutta onhan toi hieno nähä PHP -ssäkin

kayttaja-3842 [12.03.2009 13:50:58]

#

rax ei taida toimia kaikissa selaimissa tuo opacity määritelmä...

ajv [13.03.2020 13:13:23]

#

Ah... wayback machine vajaa 16v taaksepäin :D

Sivun alkuun

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta