[SOLVED] Ajax call to show PNG image comes out garbage

[sandbird]

Hi, I am trying to call a php page through ajax to show a png file created in that php file.

My code is this:

 

Index.html

<script text="text/Javascript">

//////////////////////////////////////////////////////////////////////////////////////////////
// AJAX FUNCTIONS ////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////
function xmlhttpPost(f,  strURL) {
    var xmlHttpReq = false;
    var self = this;
    // Mozilla/Safari
    if (window.XMLHttpRequest) {
        self.xmlHttpReq = new XMLHttpRequest();
    }
    // IE
    else if (window.ActiveXObject) {
        self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    }
    self.xmlHttpReq.open('POST', strURL, true);
    self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    self.xmlHttpReq.onreadystatechange = function() {
        if (self.xmlHttpReq.readyState == 4) {
            updatepage(f, self.xmlHttpReq.responseText);
        }
    }
    self.xmlHttpReq.send(f);
}


function updatepage(f,str) {
    document.getElementById(f).innerHTML = str;
}


</script>

<input id="makebutton" onclick="this.disabled=true; document.getElementById('result').innerHTML='<p><b>Bringing pic...</b> Please wait</p>.'; xmlhttpPost('result','button.php');" value="Bring Pic" type="button">

<div style="text-align: center;"><span id="result"></span></div>

 

button.php

<?
// print the header telling the web browser that its a png image
header ("Content-type: image/png",false);
// Create an image width 200 and height 30 pixels
$im=imagecreate(200,30) or die("Can not initialize GD Stream");
// BackGround Color of the image
$bgcolor=ImageColorAllocate($im,255,0,0);
// text color of the image
$textcolor=ImageColorAllocate($im,255,255,255);
//write string to image
// 5 : font , 1 : x , 5 : y
imagestring($im,5,1,5,"Hello World",$textcolor);
imagepng($im); // output to browser
imagedestroy($im); // Frees Memory
?>

 

Output

 

What the hell am i doing wrong ?  ??? ???

[corbin]

You cannot embed images in HTML.  You must use an image tag (img) so that the browser knows to embed it as an image on the page.

 

It would be better to just change the innerHTML of result to <img src="button.php" /> or something like that.

[sandbird]

Thanks for your answer.

I solved it by saving the image on a folder and then return the <img src...> back to the "result".

Its not what i am was going for but since its working i'll take it