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 -> ratio > 1 { $resultw = $max; $resulth = $max/$ratio; } else // portrait image -> ratio < 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 & 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 ?> |
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&max=200&rotation=14″ alt=““ />
<img style=“position: relative; top: -60px;“ src=“/rotatedimage.php?pic=galerie/Rotes_Meer_2010_II/IMG_7946.jpg&max=200&rotation=-12″ alt=““ />
<img style=“position: relative; top: -120px;“ src=“/rotatedimage.php?pic=galerie/Rotes_Meer_2010_II/IMG_7942.jpg&max=200&rotation=8″ alt=““ /></div>
würde zum Beispiel so aussehen:
Download des fertigen Skripts mit den benötigten Shattenbildern:
rotated.zip