GD header + AJAX not working out

GD and GD2 are useful libraries for creating graphics on-the-fly. Discuss your PHP GD and GD2 scripts here.

Moderators: onion2k, General Moderators

Post Reply
Sled
Forum Newbie
Posts: 6
Joined: Fri Jan 18, 2008 8:04 am

GD header + AJAX not working out

Post 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?
User avatar
onion2k
Jedi Mod
Posts: 5263
Joined: Tue Dec 21, 2004 5:03 pm
Location: usrlab.com

Re: GD header + AJAX not working out

Post 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.
Sled
Forum Newbie
Posts: 6
Joined: Fri Jan 18, 2008 8:04 am

Re: GD header + AJAX not working out

Post 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?
User avatar
onion2k
Jedi Mod
Posts: 5263
Joined: Tue Dec 21, 2004 5:03 pm
Location: usrlab.com

Re: GD header + AJAX not working out

Post 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.
Sled
Forum Newbie
Posts: 6
Joined: Fri Jan 18, 2008 8:04 am

Re: GD header + AJAX not working out

Post by Sled »

i am still unable to get this working.
can someone please help
Thanks
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Re: GD header + AJAX not working out

Post by John Cartwright »

Sled wrote:i am still unable to get this working.
can someone please help
Thanks
Post your updated code
Post Reply