On June 5th, 2008 milburn wrote…

The Anaglyph Creator

Having detailed how to create a script using the GD image library to create anaglyphs, I decided to create a webpage for those people not lucky enough to have their own web hosting. The page is very simple and it works similarly to the previous script.

Any online tool is vulnerable to abuse but their are a number of precautions I needed to take. Firstly I needed to make the script secure. I don’t want people hacking my site through a little script I wrote just because I couldn’t be bothered to make it secure. On the contrary to what most people think, making file uploads safe isn’t too difficult. Firstly I make sure tat the user has uploaded to files and no upload errors occurred using the following if statement.

if(!empty($_FILES['left']) && !empty($_FILES['right']) && $_FILES['right']['error'] == 0 && $_FILES['left']['error'] == 0) {

Secondly since only images can be uploaded I check they are really images using the getimagesize function. Some people use the files mime type to check whether the file is valid however this is insecure as the user can fake this. Looking at the file extension is a much better option because the Apache web server serves pages based on file extensions. Of course for extra-security checking both is advised to prevent users uploading malicious scripts.

The uploaded files are generally safe until you move them from the temp location to a directory where they can be served over the internet. As the getimagesize is more reliable than either of the other methods I have omitted them but only because I wasn’t going to move the uploaded files to a public area of the server.

There are several ways to fool getimagesize such as hiding PHP in a carefully created but still valid image file and giving the file a .php extension. I should also mention that all file upload names should be changed to prevent XSS attacks. As I mentioned earlier the reason why this amount of security suffices is because only the final image is placed on the public area.

$left_size = @getimagesize($_FILES['left']['tmp_name']);
$right_size = @getimagesize($_FILES['right']['tmp_name']);
if($left_size && $right_size && $left_size[0]==$right_size[0] && $right_size[0]<1025 && $left_size[1]==$right_size[1] && $right_size[1]<1025 && $left_size[2]==$right_size[2])

As you can see I have checked that the two images uploaded are the same size by checking that the height and width are equal and both less than 1025px. The images must be less than 1025px because larger files put too much of a strain on my server and can take over 5 seconds of processing time ouch!! There are other methods I could implement to stop people abusing this service such as allowing them to create only one anaglyph per session.

if(image($left_size)){
$n=rand(1,1000);
echo '<img src="temp.jpg?'.$n.'" alt="Anaglyph">';
}

In this section of code I pass the size of the image to the image function which creates an image and outputs the completed anaglyph as temp.jpg. You may be wondering why I append a random number to the image source. It’s actually to prevent the images being cached incorrectly. The subject of caching is in itself very complex so I ill leave this till another day to explain.

Finally the image function itself.

function image($size){
//loads the files from the temp location
$left = $_FILES['left']['tmp_name'];
$right = $_FILES['right']['tmp_name'];
//finds the type of image
switch($size[2]) {
case IMAGETYPE_GIF:
$src_right = imagecreatefromgif($right);
$src_left = imagecreatefromgif($left);
break;
case IMAGETYPE_JPEG:
$src_right = imagecreatefromjpeg($right);
$src_left = imagecreatefromjpeg($left);
break;
case IMAGETYPE_PNG:
$src_right = imagecreatefrompng($right);
$src_left = imagecreatefrompng($left);
break;
default:
return false;
}
//finds the height and width of the image
list($width, $height) = $size;
//create the canvas
$anaglyph= imagecreatetruecolor($width, $height);
//for each pixel
for ($y=0;$y<$height;$y++){
for ($x=0;$x<$width;$x++){
//find the colour
$rgb_left = imagecolorat($src_left,$x,$y);
//find the rgb value
$cols = imagecolorsforindex($src_left, $rgb_left);
$r = $cols['red'];
$rgb_right = imagecolorat($src_right,$x,$y);
$cols = imagecolorsforindex($src_right, $rgb_right);
$g = $cols['green'];
$b = $cols['blue'];
//set the combined colour
$color = imagecolorallocate($anaglyph,$r,$g,$b);
//set the pixel on our canvas to the colour
imagesetpixel($anaglyph,$x,$y,$color);
}
}
//output the image as a jpeg to temp.jpg quality is 100 (best)
imagejpeg($anaglyph,'temp.jpg',100);
//don't forget to return true!
return true;
}

I’m happy for people to use this code to create their own anaglyph generators or for other projects but if you want to try this script out and create your own anglyphs go to the anaglyph creator.

You can leave a comment, or trackback from your own site.

4 Responses to “The Anaglyph Creator”

  1. On January 25th, 2009 Milburn - Blog Archive - Instant Solve Updates said…

    [...] updated Instant Solve with two new tools. The first is the anaglyph creator which I created a while ago. Please try it out. Some fabulous images have been made with the anaglyph [...]

  2. On March 10th, 2011 murtaza said…

    hello buddy . you have written a cool piece of code . kudos

  3. On August 26th, 2011 gareth said…

    “I don’t want people hacking my site through a little script I wrote just because I couldn’t be bothered to make it secure.” Security nowadays is so important. It seems like it has become like a sport to hack websites. I can´t see the fun in it, only the aggravation of the damage it does.

    “The images must be less than 1025px because larger files put too much of a strain on my server and can take over 5 seconds of processing time ouch!!” That seems like a long time indeed. Will that affect the overall responsiveness of your site then? How would you make sure your website remains responsive?

  4. On October 27th, 2011 Fred said…

    Cool! I thought of using image editors to make anaglyphs. I wonder how they make 3d movies.

Leave a Comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Proudly powered by WordPress with plane theme by me! | © 2007 - 2014 Thomas Milburn | Valid CSS and HTML