Seite wählen

Ein PHP Skript um Bilder mit einem Schatten zu versehen, das Ganze zu rotieren und Transparenzen zu behalten.

<!--?php  // file: rotatedimage.php // mandatory parameter - The image to load $graphic = $_GET['pic'];  // Optional GET parameters $max = $_GET['max']; // maximum image dimensions, the larger of width/height will be taken $rotation = $_GET['rotation']; $borderwidth = $_GET['bw']; // The width and height of the image						  list($width, $height) = getImageSize($graphic);   // Calculate the image width - height ratio $ratio = $width/$height; // sets the optional parameters to defaults if not provided if (!$rotation) $rotation = 0; if (!$max) $max = max($width, $height); if (!$borderwidth) $borderwidth = round($max/50); // sets the maximum height / width to $max (optional) if ($width --> $height) // landscape image -&gt; ratio &gt; 1
{
    $resultw = $max;
    $resulth = $max/$ratio;
}
else // portrait image -&gt; ratio &lt; 1
{
    $resultw = $max*$ratio;
    $resulth = $max;   
}
 
// load the image
$image = imagecreatefromjpeg($graphic);
 
// Set the border color
$bordercolor = imagecolorallocate($image,255,255,255);
 
// Load the shadow images
$corner = imagecreatefrompng("images/corner.png");
$side  = imagecreatefrompng("images/side.png");
 
// Define the dimensions of the side images
$d = 10; // Border width (Gradient of shadow in pixels for top, left, right and bottom)
$c = 20; // dimensions of the corner images (should be double of border width)
 
// define the width &amp; height of the canvas that holds the image
$canvasHeight = $resulth + (2*imagesx($side));
$canvasWidth  = $resultw + (2*imagesy($side));
 
// Create a blank canvas with these new dimensions and fill with transparent color
$canvas = imagecreatetruecolor($canvasWidth, $canvasHeight);
$siderans_colour = imagecolorallocatealpha($canvas, 0, 0, 0, 127);
imagefill($canvas, 0, 0, $siderans_colour);
 
// top, right, bottom, left shadows
imagecopyresized($canvas, $side,$c,0,0,0,$canvasWidth-($c*2),$d,$d,$d);
imagecopyresized($canvas, imagerotate($side,90,imagecolortransparent($side)),0,$c,0,0,$d,$canvasHeight-($c*2),$d,$d);
imagecopyresized($canvas, imagerotate($side,180,imagecolortransparent($side)), $c,$canvasHeight-$d,0,0,$canvasWidth-($c*2),$d,$d, $d);
imagecopyresized($canvas, imagerotate($side,270,imagecolortransparent($side)),$canvasWidth-$d,$c,0,0,$d,$canvasHeight-($c*2),$d,$d);
 
// cornershadows
imagecopy($canvas, $corner,0,0,0,0,$c,$c);
imagecopy($canvas, imagerotate($corner,90,imagecolortransparent($corner)),0,$canvasHeight-$c,0,0,$c,$c);
imagecopy($canvas, imagerotate($corner,180,imagecolortransparent($corner)),$canvasWidth-$c,$canvasHeight-$c,0,0,$c,$c);
imagecopy($canvas, imagerotate($corner,270,imagecolortransparent($corner)),$canvasWidth-$c,0,0,0,$c,$c);
 
// This will make the border
imagefilledrectangle($canvas,imagesx($side),imagesy($side),$canvasWidth-imagesx($side) ,$canvasHeight-imagesy($side),$bordercolor);
 
// copy the image into the canvas (leaving the border free)
imagecopyresampled($canvas, $image, $d+$borderwidth, $d+$borderwidth, 0, 0, $resultw-$borderwidth*2+1, $resulth-$borderwidth*2+1, $width, $height);
 
// rotate the whole thing (optional)
$canvas = imagerotate($canvas, $rotation, imagecolortransparent($canvas));
 
// Output the result to the browser
header("content-type: image/png"); 	// This sets the header type
imagesavealpha($canvas, true); // saves the transparency
imagepng($canvas); // Outputs the image
ImageDestroy($canvas); // Frees up the memory
?&gt;

Das schöne, an den beibehaltenen Transparenzen ist, daß man die Bilder übereinander legen kann. Nachteil: Das Format sollte dafür PNG sein, was bei Fotos deutlich größere Dateigrößen als bei JPG mit sich bringt.

folgender html Code:

<div style=“width: 500px; text-align: center;“>
<img src=“/rotatedimage.php?pic=galerie/Rotes_Meer_2010_II/IMG_7937.jpg&amp;max=200&amp;rotation=14″ alt=““ />
<img style=“position: relative; top: -60px;“ src=“/rotatedimage.php?pic=galerie/Rotes_Meer_2010_II/IMG_7946.jpg&amp;max=200&amp;rotation=-12″ alt=““ />
<img style=“position: relative; top: -120px;“ src=“/rotatedimage.php?pic=galerie/Rotes_Meer_2010_II/IMG_7942.jpg&amp;max=200&amp;rotation=8″ alt=““ /></div>

würde zum Beispiel so aussehen:

bild1
bild2
bild3

Download des fertigen Skripts mit den benötigten Shattenbildern:
rotated.zip