One thing I have always found insanely annoying when designing or even using a social network, is the constant battle with inconsistently sized avatars.  As a user, I understand I can only do my part, but as a designer, I have been continually vexed by my inability to find a good Avatar Generator around the internet. 

For those of you who have no idea what I am talking about, an Avatar is a computer user's representation of himself or herself.  Open up Facebook, or God forbid Myspace, and look at your friends lists.  Bingo...Avatars.  And no matter what you will always have that one jackass who cuts himself out of a wedding photo, making their profile picture 60px X 400px, and now your profile looks like a working piece of shite! 

As I said before...as a user, I have done my part.  As a designer I have failed to find a good Avatar Generator...so as always I just built one, and have decided that if I post the code...maybe I can get some of these other social networks on the same page.  (Doubtful!)

Now, I am fairly familiar with the Scriptaculous library, and I realized that it had everything I needed.  If your familiar with the library, just stop and think about it.  The only things that are complex in an avatar generator are the drag and drop, and image re-sizing.  Scripaculous has both.  A drag and drop function, and slider controls. 

Below is my simple avatar generator utilizing Scriptaculous. (The final files can be downloaded at the end.)

Naturally, I built this on a PHP platform.  However, the only time PHP is utilized is when saving it to the server.  Other than that you have a little javascript, one photo to manipulate, a few DIV tags and the Scriptaculous library.  The whole thing is well under 100 lines of code (excluding the PHP which is 31).

Javascript Includes:

1. <script src="ajax/prototype.js" type="text/javascript"></script>
2. <script src="ajax/scriptaculous.js" type="text/javascript"></script>
3. <script src="ajax/effects.js" type="text/javascript"></script>
4. <script src="ajax/slider.js" type="text/javascript"></script>

Javascript:

1. var origW = 0;
2. var origH = 0;
3. var curX = 0;
4. var curY = 0;
5. var curS = 0;
6. var curImage = 'photo.jpg';
8. function SubmitIt() {

   window.location.href="renderImage.php?image=" escape(curImage) '&&xpos=' escape(curX) '&&ypos=' escape(curY) '&&scale=' escape(curS);

9. }
11. function Debug() {
12. document.getElementById('textarea').value = 'Top: ' curY ', Btm: ' curX ', Scale: ' curS;
13. }
15. window.onload = function init() {
17. origW = document.getElementById('handle').width;
18. origH = document.getElementById('handle').height;
20. new Draggable('handle');
22. Droppables.add('testAv', {
23. onDrop: function(element) {
24. curX = element.style.left;
25. curY = element.style.top;
26. Debug();
27. }
28. });
30. new Control.Slider('handle2', 'track2', {
31. axis: 'vertical',
32. onSlide: function(v){
33. document.getElementById('handle').width = Number(origW * (1-v));
34. document.getElementById('handle').height = Number(origH * (1-v));
35. curS = v;
36. Debug();
37. }
38. });
39. }

HTML:

1. <h1>Avatar Generator</h1>
2. <table width="150" cellpadding="3" cellspacing="0" border="0">
3. <tr>
4. <td width="120">
5. <div id="testAv" style="width: 120px; height: 120px; overflow: hidden; border: 2px solid #FF3300;">
6. <img src="photo.jpg" width="850" height="565" border="0" id="handle" />
7. </div>
8. </td>
9. <td>
10. <div id="track2" style="height:120px; background-color:#ccc; width:10px;">
11. <div id="handle2" style="width:15px; height:10px; background-color:#f00; cursor:move;"></div>
12. </div>
13. </td>
14. </tr>
15. </table>
16. <div style="margin-top: 20px;"><textarea name="textarea" id="textarea" rows="5" style="width: 300px"></textarea></div>
17. <div><input type="submit" name="Submit" value="Submit" onClick="SubmitIt()" /></div>

PHP:

1. <?php
3. $uid = $_GET['uid'];
4. $xP = substr($_GET['xpos'], 0, -2);
5. $yP = substr($_GET['ypos'], 0, -2);
6. $sC = $_GET['scale'];
7. $file = $_GET['image'];
9. $source = imagecreatefromjpeg($file);
11. list($w, $h) = getimagesize($file);
13. $width = ceil($w * (1 - $sC));
14. $height = ceil($h * (1 - $sC));
16. $tempFile = explode('.', $file);
17. $tempFile = $tempFile[0] .'_TEMP.' .$tempFile[1];
19. // Create 190x127 ##
20. #################################################
21. $dest = imagecreatetruecolor(120, 120);
22. $source = imagecreatefromjpeg($file);
23. if(imagecopyresampled($dest, $source, $xP, $yP, 0, 0, $width, $height, $w, $h)) {
24. imagejpeg($dest, $tempFile, 100);
25. header('Content-Type: image/jpg');
26. print file_get_contents($tempFile);
27. } else {
28. echo 'Error: There was a problem creating the file.';
29. }
31. ?>