Port 80 - Devspot@Bollibompa

AJAX + GD2 = TRUE, GD PART III

So we know that GD2 has the power of image processing on the server side. This combined with refreshless page loads, the ability to deliver eye-candy with the click of a button, could probably render some cool results? Let's give it a shot ^^

What I'll try to show here is the following:

Set up a "base" image and show it in the browser
Allow for user input, text, to be submitted
Let server process the image on submit, to apply text to the image
Have AJAX (powered by SAJAX) deliver the result back by javascript callback

There are probably easier ways to apply the same effect we'll be creating. We do this because we know that what is shown is a "real" image, processed and put together by GD2. It creates an actual image wich we could store, edit or do whatever we want with - it's no cheap javascript layered effect ^^ Below, the application. Below that, the magic piece by piece, explained




TOP OF FILE :
<?
    require("lib/Sajax.php");

    //serverside image process
    function processImage($text){
        $im = imagecreatefrompng(
            '/xxx/yyyy/zzz/httpd.www/port80/images/diver.png');
        
        $black = imagecolorclosest($im, 0, 0, 0);
        imagestring($im, 5, 90, 285, $text, $col);

        imagepng($im, 
            '/xxx/yyyy/zzz/httpd.www/port80/upload/tmpDiver.png');
        return "Done!";
    }
    
    $sajax_request_type = "GET";
    sajax_init();
    sajax_export("processImage");
    sajax_handle_client_request();
?>
------------------------------------------------------------
IN PAGE HEADER :
<script language="JavaScript" type="text/javascript">
<?
    sajax_show_javascript();
?>

function updateImage(){
    var theText;
    theText = document.getElementById("theTextField").value;
    x_processImage(theText, returnHandler);
}

function returnHandler(retval){
    var now;
    now = new Date();
    document.getElementById('theAjaxImage').src = 'upload/tmpDiver.png?' + now.getTime();
}
</script>
------------------------------------------------------------
AS INTERFACE :
<img src="images/diver.png" id="theAjaxImage" 
    name="theAjaxImage" border="0" style="border: 1px solid black">
<br /><br />
<input type="text" value="Text here" size="20" id="theTextField" />
<input type="button" value="Update" onClick="updateImage()" />