|
|
|
Current Projects: PHP on XP Guide — NFO Viewer — Easy Reflections — Photon Storm — HotWire — FileGlider
Wednesday, October 25. 2006Easy Reflections
Today I released a piece of source code that will take any GIF, JPEG or PNG and create an new image based on it, which is a nicely formatted reflection of the original. You can use it to give your site that 'iTunes / Apple' look if you so desire. I created it to make image uploads to a site I run look that little bit nicer, so figured I would share it with you all. You can grab it from here along with instructions and examples.
Trackbacks
Trackback specific URI for this entry
No Trackbacks
Comments
Display comments as
(Linear | Threaded)
Hi Richard,
Very nice php-ing. I have made an image magic script that make thumbnails with rounded edges and have looking for a easy way to add reflection e.g. http://www.boyfarrell.com/pictures/summer_2006/ . Cheers, Dan.
Just FYI, I had some vertical banding problems with the reflections, I fixed it by changing the way the alpha channel was applied. There was also a bug fixed with the image flip, leaving a black solid line along the top of the reflection. I also added caching by placing the cached image in the same directory as the original image.
I e-mailed the changes to Richard, hopefully he will consider them for a future release. This is a very useful script, a noticable client-side performance improvement over the javascript based reflection scripts. You can see it in action at motortopia.com.
I got your point regarding the server side.... That's correct.
For those who would like to check examples of Khlo's javascript implementation, there is the link: http://www.featurepics.com/Editorial/Image-Reflection-Special-Effect.aspx - "Image Reflection" effect using javascript
Something I'd really like to see is to do away with the background colour altogether and generate a truly transparent image using the alpha channel alone. That way reflections will work over textured or graduated backgrounds. You'd need to work around IE's horrific PNG support, but that's been done before.
The IE issue isn't too bad, I'm happy doing what needs to be done to the PNG chunks - it is if php itself can handle this using native functions (I don't have the time or the interest to get into building a PNG via binary strings). Perhaps the blend functions might, I'll have a look into it, you've got me intrigued.
Even better if the original image has an alpha so you could have cut out reflections of non-rectangular images!
You could even have progressive blur, though I might be getting carried away there! If GD is too clunky or slow, image/graphicsMagick might do a better job - I know it can draw gradients unassisted and has good alpha support. Not as widely available as GD though.
Can someone please help me fix this problem:
In IE, reflected images can't be hyperlinked (or may be I do something wrong?).
To make the reflection a link, just wrap the <img> tag with a standard <a href>. Something like:
<a href="here.html"><img src="reflect.php?img=pic" /></a>
So has anybody found a solution for Version 3 working in IE, because it is not working even in IE6? Workarounds are appreciated.
It works in IE7, but it'll never work in IE6 as it doesn't natively support PNGs with alpha transparency. There is that 'hack' to work around it which you can find here - it's just a CSS hack, so not exactly hard to implement, but it's a hack all the same: http://www.themaninblue.com/writing/perspective/2004/06/18/
beautiful - exactly what i was looking for, and with caching as well its even better than i was looking for..
i was considering using the script to batch process all of our images, but this is better as if our staff change images then the reflection will be updated.. oh my god  my first intro to GD and I'm impressed!!!
Hello Richard
Thank you for this code, in Opera 9.10 it works perfect. I would suggest you to continue Coding in the industry, as well as your developments is very useful.
Great blog post. I've seen this effect on a few web design/development company website portfolios and always had assumed that because they design websites they probably manually created the reflection effect in photoshop or something. After considering that the web development team could probably give the designers a feature like this it would probaby be used and is the most likely method. This posting has just proved it to me. Good work here! Keep it up.
Hey, great script. How would I go about it to change the directory the cached images are stored in?
Appreciate your help. Boris
You can set the cache path at the top of the reflect PHP script itself. Just modify it to whatever you need.
I recently wrote a pugin for Wordpress using your script with ImageFlow. Now I have just received an email from a concerned user. He thinks reflect.php might be subject to malicious attacks due to the use of '$source_image = $_GET['img'];' which then gets checked via if '(file_exists($source_image))'. This might be vulnerable to local file inclusions. Now I'm just starting to code and wouldn't know the answer, so I thought I'll pass this on to you...
Cheers!
Before the file_exists() takes place $source_image is passed through this:
$source_image = $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . $source_image; file_exists() does not include the file, it merely checks that it is present. Even if a malicious $_GET['img'] was given (i.e. pointing to say a php script) More importantly though $source_image is passed through getimagesize() (line 231) before anything happens to it. If this call fails then the script aborts. This means even if the script was told to point to a non-image file (say a PHP file, or htaccess, etc) then because those sorts of files will never return valid getimagesize() data, it won't actually get beyond this point. Probably the most malicious thing you could do would be to verify if a local file existed that wasn't an image, but the script won't let you actually do anything with it.
Hai richard.
Thanks for this script. Any idea how I can adjust the script lo load external images ? Like http://www.test.com/test.jpg instead of test.jpg I want to use it for a flikr or youbube app Thanks for looking in and your help
Hi!
I'm going to use this script for my upcoming project but no matter how I code, I get the "Cannot find or read source image" error. Here is a tets: http://weber.ir/test/ Where's the problem? Thanks! |
QuicksearchCategoriesSyndicate This BlogMy AS3 Blog
Photon Storm Great PHP links
C7Y PHP Podcast CorePHP is hosted by |
