Page 1 of 1

GD header + AJAX not working out

Posted: Thu Jan 24, 2008 4:47 am
by Sled
ok so i am trying to display a gd image in an ajax div. yet everytime i do ajax seems to take out the header??

Code: Select all

     <html>
      <head>
      <title>test</title>
      </head>
      <body>
      <script>
      function loadurl(dest) {
      try {
          xmlhttp = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
      }
      xmlhttp.onreadystatechange = triggered;
      xmlhttp.open("GET", dest);
      xmlhttp.send(null);
      }
      function triggered() {
      if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
          document.getElementById("output").innerHTML = xmlhttp.responseText;
      }
      }
      </script>
      <body>
      <div id="output" onclick="loadurl('http://www.majesticarpg.com/avatar3.php')">click here to load my GD image into this div</div>
      </body>
      </html>
GD

Code: Select all

<?php
 
header("Content-type: image/png");
$im     = imagecreatefrompng("http://www.majesticarpg.com/paperdoll/1/body.png");
$im2     = imagecreatefrompng("http://www.majesticarpg.com/paperdoll/1/ears.png");
imagecolortransparent($im,imagecolorat($im,0,0));
imagecolortransparent($im2,imagecolorat($im2,0,0));
imagecopymerge($im,$im2,0,0,0,0,200,317,100); 
imagepng($im);
imagedestroy($im);
 
?>
does anyone know how to solve this issue?

Re: GD header + AJAX not working out

Posted: Sat Jan 26, 2008 4:02 am
by onion2k
The problem isn't that the Javascript is removing any headers, it's that you're trying to set the content of a div to be the binary data of an image. You can't display images by dumping the data into the middle of a page.

If you want to preload an image nicely you need to create an image in the page's image array and set it's source to be the URL of the image, that'll load it, then create an img tag in the page and set it's src to be the image that you loaded.

Code: Select all

//Create a new image in the page
var gdImage = new Image();
 
//Preload an image asset into the new image
gdImage.src = 'http://www.majesticarpg.com/avatar3.php';
 
//Create a new img tag in the page
var newimg=document.createElement('img');
 
//Set the new img tag's src to be the same as the image we preloaded
newimg.src='http://www.majesticarpg.com/avatar3.php';
 
//Append it to the output div
var output = document.getElementById('output');
output.appendChild(newimg);
 
I think that's about right. It's a while since I've done any DOM scripting/AJAX stuff without jQuery. You might even be able to set the src of newimg to be gdImage.

Re: GD header + AJAX not working out

Posted: Sun Jan 27, 2008 12:47 pm
by Sled
onion2k wrote:The problem isn't that the Javascript is removing any headers, it's that you're trying to set the content of a div to be the binary data of an image. You can't display images by dumping the data into the middle of a page.

If you want to preload an image nicely you need to create an image in the page's image array and set it's source to be the URL of the image, that'll load it, then create an img tag in the page and set it's src to be the image that you loaded.

Code: Select all

//Create a new image in the page
var gdImage = new Image();
 
//Preload an image asset into the new image
gdImage.src = 'http://www.majesticarpg.com/avatar3.php';
 
//Create a new img tag in the page
var newimg=document.createElement('img');
 
//Set the new img tag's src to be the same as the image we preloaded
newimg.src='http://www.majesticarpg.com/avatar3.php';
 
//Append it to the output div
var output = document.getElementById('output');
output.appendChild(newimg);
 
I think that's about right. It's a while since I've done any DOM scripting/AJAX stuff without jQuery. You might even be able to set the src of newimg to be gdImage.
sorry i am confused how this works.
i have added this to <head> now i dont get any errors and it doesnt do anything differently.
it loadeds the same image that i am guessing was cached.
is there anything else i must do?

Re: GD header + AJAX not working out

Posted: Fri Feb 01, 2008 5:52 am
by onion2k
The code I posted isn't a complete solution, it's just a pointer in the right direction. You'll have to write the real code yourself.

Re: GD header + AJAX not working out

Posted: Wed Feb 06, 2008 5:38 pm
by Sled
i am still unable to get this working.
can someone please help
Thanks

Re: GD header + AJAX not working out

Posted: Sat Feb 09, 2008 10:57 am
by John Cartwright
Sled wrote:i am still unable to get this working.
can someone please help
Thanks
Post your updated code