[RESOLVED] GD Images not showing up

scrfix

I am utilizing JavaScript to send variables to PHP and utilizing GD within PHP to display the images so I can have all of the DS functionality available to me.

I have this working to an extent however cannot get the images to show up. I can see the placemats for the images and the borders however no images.
Can someone help with this and point me in the right direction? I have 2 questions.

I want to use my JavaScript in a .js file instead of directly on the page a but it doesn't show any images when I utilize it that way.
I need the images to actually show up after they are run through the GD programming.

My ultimate goal is to detect the users screen width in JavaScript, send that back to PHP and reduce the images based upon whether or not the user is looking at the webpage at an 800 screen width or lower.

URL
Spectacular Computer Repair OR http://67.199.62.141/test4.php

My code is below:
HTML & JavaScript Code

<html>
<head>
<title></title>
<head>
 <script language="javascript" type="text/javascript">
 function resize() {
 var width = "width=" + screen.width;
 var path = "imgpath=images/&";
 var script = "shrink.php?";
 var logo = "imgname=scrfix-logo.png&";
 var shopping = "imgname=shopping-cart.jpg&";
 var forums = "imgname=forums.jpg&";
 var signin = "imgname=sign-in.jpg&";
 var contact = "imgname=contactus.jpg&";
 var printer = "imgname=printer.jpg&";
 document.write('<a href="/"><img class="headerimages" src="' + script + path + logo + width + '" alt="Spectacular Computer Repair" title="Spectacular Computer Repair" /></a><a href="/catalog/"><img class="headerimages" src="' + script + path + shopping + width + '" alt="Computer Repair Shopping" title="Computer Repair Shopping" /></a><a href="/computer-repair-forums/"><img class="headerimages" src="' + script + path + forums + width + '" alt="Computer Repair Forums" title="Computer Repair Forums" /></a><a href="/coordinator.php"><img class="headerimages" src="' + script + path + signin + width + '" alt="User Sign In" title="User Sign In" /></a><a href="/contact.php"><img class="headerimages" src="' + script + path + contact + width + '" alt="Contact Spectacular Computer Repair" title="Contact Spectacular Computer Repair" /></a><a href="#" onclick="window.print();return false;"><img class="headerimages" src="' + script + path + printer + width + '" alt="Print This Page" title="Print This Page" /></a>');

return 0;
}
</script>
</head>
<body onLoad="resize()">
</body>
</html>

PHP Code

<?php

$imgp = $_GET["imgpath"]; // The image pathway returned from JavaScript. (ie. images/)
$width = $_GET["width"]; // The users screen width returned from JavaScript? (ie 800)
$imgn = $_GET["imgname"]; // The image name returned from JavaScript. (ie scrfix-logo.png)
$ext = substr($imgn, strrpos($fn, '.') + 1); // Find the extension from the image name (ie jpg)
header("Content-type: image/{$ext}"); // What type of image are we working with?

function open_image($file) {
        # JPEG:
        $im = @imagecreatefromjpeg($file);
        if ($im !== false) { return $im; }

    # GIF:
    $im = @imagecreatefromgif($file);
    if ($im !== false) { return $im; }

    # PNG:
    $im = @imagecreatefrompng($file);
    if ($im !== false) { return $im; }

    # GD File:
    $im = @imagecreatefromgd($file);
    if ($im !== false) { return $im; }

    # GD2 File:
    $im = @imagecreatefromgd2($file);
    if ($im !== false) { return $im; }

    # WBMP:
    $im = @imagecreatefromwbmp($file);
    if ($im !== false) { return $im; }

    # XBM:
    $im = @imagecreatefromxbm($file);
    if ($im !== false) { return $im; }

    # XPM:
    $im = @imagecreatefromxpm($file);
    if ($im !== false) { return $im; }

    # Try and load from string:
    $im = @imagecreatefromstring(file_get_contents($file));
    if ($im !== false) { return $im; }

    return false;
}

switch($ext) {
  case "png":
    $image = open_image($imgp . $imgn); // Image name from JavaScript passed to the open_image function.
    imagepng($image);
    //Check to see if we can find the image
    if ($image === false) {
        die ('Unable to find image');
	}
    break;
  case "jpg", "jpeg":  

    $image = open_image($imgp . $imgn); // Image name from JavaScript passed to the open_image function.
    imagejpeg($image);
    //Check to see if we can find the image
    if ($image === false) {
        die ('Unable to find image');
	}
    break;	
  case "gif":
    $image = open_image($imgp . $imgn); // Image name from JavaScript passed to the open_image function.
    imagegif($image);
    //Check to see if we can find the image
    if ($image === false) {
        die ('Unable to find image');
	}
    break;
  case "gd":
    $image = open_image($imgp . $imgn); // Image name from JavaScript passed to the open_image function.
    imagegd($image);
    //Check to see if we can find the image
    if ($image === false) {
        die ('Unable to find image');
	}
    break;
  case "gd2":
    $image = open_image($imgp . $imgn); // Image name from JavaScript passed to the open_image function.
    imagegd2($image);
    //Check to see if we can find the image
    if ($image === false) {
        die ('Unable to find image');
	}
    break;
  case "wbmp":
    $image = open_image($imgp . $imgn); // Image name from JavaScript passed to the open_image function.
    imagewbmp($image);
    //Check to see if we can find the image
    if ($image === false) {
        die ('Unable to find image');
	}
    break;
  case "xbm":
    $image = open_image($imgp . $imgn); // Image name from JavaScript passed to the open_image function.
    imagepng($image);
    //Check to see if we can find the image
    if ($image === false) {
        die ('Unable to find image');
	}
    break;
  case "xpm":
    $image = open_image($imgp . $imgn); // Image name from JavaScript passed to the open_image function.
    imagexpm($image);
    //Check to see if we can find the image
    if ($image === false) {
        die ('Unable to find image');
	}
    break;
  default:
    echo "Unable to find any images.";
}
?>

Thanks for any help,

Wayne

bpat1434

I'll take a stab:

You don't really need that function open_image since you can remove that call and just do it in the switch statement. Would make your code 1/2 as long and easier to debug.

Where does $fn come from on line 6 ($ext = .... )? I don't see it.

EDIT: Okay, I see where you output the images.

I'm pretty sure the HTTP Header is "Content-Type" not "Content-type"

As an FYI, I constantly get the content-type as being text/html, and not that of an image. So that's probably your biggest issue.

scrfix

Thanks for that. I didn't see the $fn. A previous varilable since removed and forgot to change it there. I will correct that and see if that clears this up.

Why don't you think I need the open_image function. I have that there so it can distinguish exactly what image in being input through. It will actually tell what image it is even if an image has an incorrect extension on it.

Wayne

bpat1434

If an image has an incorrect extension, it won't be displayed anyway. So why do you need it?

scrfix

I corrected the $fn to $imgn and now I get the page starting to load, the images do not show up and in the status bar, a constant downloading image with the src is there.

With that function it will display it or at least that is the idea.. lol

Wayne

scrfix

Okay,

So what you are stating is that I should rewrite this like this:

PHP Code

<?php

$imgp = $_GET["imgpath"]; // The image pathway returned from JavaScript. (ie. images/)
$width = $_GET["width"]; // The users screen width returned from JavaScript? (ie 800)
$imgn = $_GET["imgname"]; // The image name returned from JavaScript. (ie scrfix-logo.png)
$ext = substr($imgn, strrpos($imgn, '.') + 1); // Find the extension from the image name (ie jpg)
$image = $imgp . $imgn;

header("Content-Type: image/{$ext}"); // What type of image are we working with?

/*
function open_image($file) {
        # JPEG:
        $im = @imagecreatefromjpeg($file);
        if ($im !== false) { return $im; }

    # GIF:
    $im = @imagecreatefromgif($file);
    if ($im !== false) { return $im; }

    # PNG:
    $im = @imagecreatefrompng($file);
    if ($im !== false) { return $im; }

    # GD File:
    $im = @imagecreatefromgd($file);
    if ($im !== false) { return $im; }

    # GD2 File:
    $im = @imagecreatefromgd2($file);
    if ($im !== false) { return $im; }

    # WBMP:
    $im = @imagecreatefromwbmp($file);
    if ($im !== false) { return $im; }

    # XBM:
    $im = @imagecreatefromxbm($file);
    if ($im !== false) { return $im; }

    # XPM:
    $im = @imagecreatefromxpm($file);
    if ($im !== false) { return $im; }

    # Try and load from string:
    $im = @imagecreatefromstring(file_get_contents($file));
    if ($im !== false) { return $im; }

    return false;
}
*/
switch($ext) {
  case "png":
  //  $image = open_image($imgp . $imgn); // Image name from JavaScript passed to the open_image function.
    imagepng($image);
    //Check to see if we can find the image
    if ($image === false) {
        die ('Unable to find image');
	}
    break;
  case "jpg", "jpeg":  

//    $image = open_image($imgp . $imgn); // Image name from JavaScript passed to the open_image function.
    imagejpeg($image);
    //Check to see if we can find the image
    if ($image === false) {
        die ('Unable to find image');
	}
    break;	
  case "gif":
//    $image = open_image($imgp . $imgn); // Image name from JavaScript passed to the open_image function.
    imagegif($image);
    //Check to see if we can find the image
    if ($image === false) {
        die ('Unable to find image');
	}
    break;
  case "gd":
//    $image = open_image($imgp . $imgn); // Image name from JavaScript passed to the open_image function.
    imagegd($image);
    //Check to see if we can find the image
    if ($image === false) {
        die ('Unable to find image');
	}
    break;
  case "gd2":
//    $image = open_image($imgp . $imgn); // Image name from JavaScript passed to the open_image function.
    imagegd2($image);
    //Check to see if we can find the image
    if ($image === false) {
        die ('Unable to find image');
	}
    break;
  case "wbmp":
//    $image = open_image($imgp . $imgn); // Image name from JavaScript passed to the open_image function.
    imagewbmp($image);
    //Check to see if we can find the image
    if ($image === false) {
        die ('Unable to find image');
	}
    break;
  case "xbm":
//    $image = open_image($imgp . $imgn); // Image name from JavaScript passed to the open_image function.
    imagepng($image);
    //Check to see if we can find the image
    if ($image === false) {
        die ('Unable to find image');
	}
    break;
  case "xpm":
//    $image = open_image($imgp . $imgn); // Image name from JavaScript passed to the open_image function.
    imagexpm($image);
    //Check to see if we can find the image
    if ($image === false) {
        die ('Unable to find image');
	}
    break;
  default:
    echo "Unable to find any images.";
}
?>

I will try that and see if that helps.

Updated:
I have the same issue happening. I think it may be because of the content-type because it is outputting multiple header types both png and jpg.

Okay, that is not the case because I tried to put the content-type as /png instead of a variable.

Wayne

HalfaBee

You are probably generating an error or something.

If you comment out the header(), you can see if an image is being sent by calling the script directly.

bpat1434

Umm... you gotta open the image if you're not going to use your function....

switch($ext) {
  case "png":
   $image = imagecreatefrompng($imgp.$imgn);
  //  $image = open_image($imgp . $imgn); // Image name from JavaScript passed to the open_image function.
    imagepng($image);
    //Check to see if we can find the image
    if ($image === false) {
        die ('Unable to find image');
	}
    break;
  case "jpg", "jpeg":  

    $image = imagecreatefromjpg($imgp.$imgn);
//    $image = open_image($imgp . $imgn); // Image name from JavaScript passed to the open_image function.
    imagejpeg($image);
    //Check to see if we can find the image
    if ($image === false) {
        die ('Unable to find image');
	}
    break;	

// ... etc, etc, etc,

scrfix

Ha Ha... Missed that. I was in the middle of working on cooking dinner for the family at the same time.

However I have that changed now and still same effect. I have even attempted to comment out the header content to no avail.

Here is the modified code

PHP Code:

<?php

$imgp = $_GET["imgpath"]; // The image pathway returned from JavaScript. (ie. images/)
$width = $_GET["width"]; // The users screen width returned from JavaScript? (ie 800)
$imgn = $_GET["imgname"]; // The image name returned from JavaScript. (ie scrfix-logo.png)
$ext = substr($imgn, strrpos($imgn, '.') + 1); // Find the extension from the image name (ie jpg)
$image = $imgp . $imgn;

header("Content-Type: image/" . $ext); // What type of image are we working with?

/*
function open_image($file) {
        # JPEG:
        $im = @imagecreatefromjpeg($file);
        if ($im !== false) { return $im; }

    # GIF:
    $im = @imagecreatefromgif($file);
    if ($im !== false) { return $im; }

    # PNG:
    $im = @imagecreatefrompng($file);
    if ($im !== false) { return $im; }

    # GD File:
    $im = @imagecreatefromgd($file);
    if ($im !== false) { return $im; }

    # GD2 File:
    $im = @imagecreatefromgd2($file);
    if ($im !== false) { return $im; }

    # WBMP:
    $im = @imagecreatefromwbmp($file);
    if ($im !== false) { return $im; }

    # XBM:
    $im = @imagecreatefromxbm($file);
    if ($im !== false) { return $im; }

    # XPM:
    $im = @imagecreatefromxpm($file);
    if ($im !== false) { return $im; }

    # Try and load from string:
    $im = @imagecreatefromstring(file_get_contents($file));
    if ($im !== false) { return $im; }

    return false;
}
*/
switch($ext) {
  case "png":
  //  $image = open_image($imgp . $imgn); // Image name from JavaScript passed to the open_image function.
    $im = @imagecreatefrompng($imgp . $imgn);
    imagepng($image);
    //Check to see if we can find the image
    if ($image === false) {
        die ('Unable to find image');
	}
    break;
  case "jpg", "jpeg":  

//    $image = open_image($imgp . $imgn); // Image name from JavaScript passed to the open_image function.
    $im = @imagecreatefromjpeg($imgp . $imgn);
    imagejpeg($image);
    //Check to see if we can find the image
    if ($image === false) {
        die ('Unable to find image');
	}
    break;	
  case "gif":
//    $image = open_image($imgp . $imgn); // Image name from JavaScript passed to the open_image function.
    $im = @imagecreatefromgif($imgp . $imgn);
    imagegif($image);
    //Check to see if we can find the image
    if ($image === false) {
        die ('Unable to find image');
	}
    break;
  case "gd":
//    $image = open_image($imgp . $imgn); // Image name from JavaScript passed to the open_image function.
    $im = @imagecreatefromgd($imgp . $imgn);
    imagegd($image);
    //Check to see if we can find the image
    if ($image === false) {
        die ('Unable to find image');
	}
    break;
  case "gd2":
//    $image = open_image($imgp . $imgn); // Image name from JavaScript passed to the open_image function.
    $im = @imagecreatefromgd2($imgp . $imgn);
    imagegd2($image);
    //Check to see if we can find the image
    if ($image === false) {
        die ('Unable to find image');
	}
    break;
  case "wbmp":
//    $image = open_image($imgp . $imgn); // Image name from JavaScript passed to the open_image function.
    $im = @imagecreatefromwmbp($imgp . $imgn);
    imagewbmp($image);
    //Check to see if we can find the image
    if ($image === false) {
        die ('Unable to find image');
	}
    break;
  case "xbm":
//    $image = open_image($imgp . $imgn); // Image name from JavaScript passed to the open_image function.
    $im = @imagecreatefromxbm($imgp . $imgn);
    imagepng($image);
    //Check to see if we can find the image
    if ($image === false) {
        die ('Unable to find image');
	}
    break;
  case "xpm":
//    $image = open_image($imgp . $imgn); // Image name from JavaScript passed to the open_image function.
    $im = @imagecreatefromxpm($imgp . $imgn);
    imagexpm($image);
    //Check to see if we can find the image
    if ($image === false) {
        die ('Unable to find image');
	}
    break;
  default:
    echo "Unable to find any images.";
}
?>

bpat1434

ugh... $image is undefined, but $im is.... $im holds the image resource, $image is nothing.

scrfix

damn, missed that too however no avail after that has been repaired.

scrfix

Okay,

Interestingly enough I have tried this again with just minimal items involved. This works no problem.

HTML Code

<html>
<head>
<title></title>
<head>
</head>
<body>
<img src="shrink2.php?imgpath=images/&imgname=scrfix-logo.png">
</body>
</html>

PHP Code

<?php
$imgp = $_GET["imgpath"]; // The image pathway returned from JavaScript. (ie. images/)
$imgn = $_GET["imgname"]; // The image name returned from JavaScript. (ie scrfix-logo.png)
$image = $imgp . $imgn;
header("Content-Type: image/png"); // What type of image are we working with?
$image = @imagecreatefrompng($image);
    if ($image === false) {
        die ('Unable to find image');
	}
imagepng($image);
?>

This works no problem. I am going to change 1 thing at a time until I can pinpoint where this issue is coming from.

Wayne

scrfix

I have pinpointed this error. The coding is correct however the issue has something to do with the case statement. If I take everything away from the case statement except for the png portion, the code works. However if I add the rest of the case statement into the code, then the image doesn't show up.

Updated
It appears to be the following line in my case statement
case "jpg", "jpeg":

As soon as I removed the jpeg, everything came up testing with just 1 image. I have not tested multiple images. I will keep a post as to what the issue is.

Wayne

scrfix

Resolution Post
This issue is resolved. All images now appear both ways, no matter whether I have my open_image() function or just the case statement. I opted to keep that in there because the reasoning behind that is so that no matter what image is sent through the script, even if it has an incorrect extension, it should still display although I have not tested this. I will test to see if it works.

Requirements
1. PHP with GD Enabled - Ask your hosting company or use <?php phpinfo(); ?> in a php file and verify it yourself.
2. JavaScript enabled browser

Here is the code to output multiple images between JavaScript and GD PHP. This script does nothing more at this time than detect the images and screen width of the user and output the images. I do not have anything in here yet for resizing the images according to users width. I will work on that next. You can add any other GD programming code you want in there.

URL
Spectacular Computer Repair

HTML and JavaScript Code
The JavaScript code must go on your webpage, preferably in between the <head></head> tags. I tried it as a .js file and it wasn't working. I don't know why. The code has been cleaned up a little to make it a little more user-friendly to read.

<html>
<head>
<title></title>
<head>
 <script language="javascript" type="text/javascript">
 function resize() {
// Variables to be sent to PHP.  The PHP variables to be sent are in "" (ie width=, imgpath=)
 var width = "width=" + screen.width; // Set variable width to users screen width
 var path = "imgpath=images/&"; // Set the path to the image
 var logo = "imgname=scrfix-logo.png&"; //Name of my image
 var shopping = "imgname=shopping-cart.jpg&";  //Name of my image
 var forums = "imgname=forums.jpg&"; //Name of my image
 var signin = "imgname=sign-in.jpg&"; //Name of my image
 var contact = "imgname=contactus.jpg&"; //Name of my image
 var printer = "imgname=printer.jpg&"; //Name of my image
// End of Variables to be sent to PHP.  The below variables are only for this script.
 var script = "shrink.php?"; // The name of the php script
 var scrpth = script + path; //Combine both the script and the path to make it less to work with below.

 document.write('<a href="/"><img class="headerimages" src="' + scrpth + logo + width + '" alt="Spectacular Computer Repair" title="Spectacular Computer Repair" /></a>');
 document.write('<a href="/catalog/"><img class="headerimages" src="' + scrpth + shopping + width + '" alt="Computer Repair Shopping" title="Computer Repair Shopping" /></a>');
 document.write('<a href="/computer-repair-forums/"><img class="headerimages" src="' + scrpth + forums + width + '" alt="Computer Repair Forums" title="Computer Repair Forums" /></a>');
 document.write('<a href="/coordinator.php"><img class="headerimages" src="' + scrpth + signin + width + '" alt="User Sign In" title="User Sign In" /></a>');
 document.write('<a href="/contact.php"><img class="headerimages" src="' + scrpth + contact + width + '" alt="Contact Spectacular Computer Repair" title="Contact Spectacular Computer Repair" /></a>');
 document.write('<a href="#" onclick="window.print();return false;"><img class="headerimages" src="' + scrpth + printer + width + '" alt="Print This Page" title="Print This Page" /></a>');

return 0;
}
</script>
</head>
<body>
<script language="javascript" type="text/javascript">
resize();
</script>
</body>
</html>

Save this file as shrink.php and keep it in the same directory as the above file.
PHP Code

<?php

$imgp = $_GET["imgpath"]; // The image pathway returned from JavaScript. (ie. images/)
$width = $_GET["width"]; // The users screen width returned from JavaScript? (ie 800)
$imgn = $_GET["imgname"]; // The image name returned from JavaScript. (ie scrfix-logo.png)
$ext = substr($imgn, strrpos($imgn, '.') + 1); // Find the extension from the image name (ie jpg)
$image = $imgp . $imgn; // Combine the pathway and the image name together (ie images/scrfix-logo.png)

header("Content-Type: image/" . $ext); // What type of image are we working with?

//Test to see what type of file is loaded.  Even if an incorrect extension is loaded, load the image.
function open_image($file) {
        # JPEG:
        $im = @imagecreatefromjpeg($file);
        if ($im !== false) { return $im; }

    # GIF:
    $im = @imagecreatefromgif($file);
    if ($im !== false) { return $im; }

    # PNG:
    $im = @imagecreatefrompng($file);
    if ($im !== false) { return $im; }

    # GD File:
    $im = @imagecreatefromgd($file);
    if ($im !== false) { return $im; }

    # GD2 File:
    $im = @imagecreatefromgd2($file);
    if ($im !== false) { return $im; }

    # WBMP:
    $im = @imagecreatefromwbmp($file);
    if ($im !== false) { return $im; }

    # XBM:
    $im = @imagecreatefromxbm($file);
    if ($im !== false) { return $im; }

    # XPM:
    $im = @imagecreatefromxpm($file);
    if ($im !== false) { return $im; }

    # Try and load from string:
    $im = @imagecreatefromstring(file_get_contents($file));
    if ($im !== false) { return $im; }

    return false;
}

// Test what extension we are working with and display the image.
switch($ext) {
  case "png":
    $image = open_image($image); // Image name from JavaScript passed to the open_image function.
    imagepng($image);  // Display the image to the browser
    //Check to see if we can find the image
    if ($image === false) {
        die ('Unable to find image');
	}
    imagedestroy($image);
    break;
  case "jpg":  

    $image = open_image($image); // Image name from JavaScript passed to the open_image function.
    imagejpeg($image);  // Display the image to the browser
    //Check to see if we can find the image
    if ($image === false) {
        die ('Unable to find image');
	}
    imagedestroy($image);
    break;	
  case "jpeg":  

    $image = open_image($image); // Image name from JavaScript passed to the open_image function.
    imagejpeg($image);  // Display the image to the browser
    //Check to see if we can find the image
    if ($image === false) {
        die ('Unable to find image');
	}
    imagedestroy($image);
    break;	
  case "gif":
    $image = open_image($image); // Image name from JavaScript passed to the open_image function.
    imagegif($image);  // Display the image to the browser
    //Check to see if we can find the image
    if ($image === false) {
        die ('Unable to find image');
	}
    imagedestroy($image);
    break;
  case "gd":
    $image = open_image($image); // Image name from JavaScript passed to the open_image function.
    imagegd($image);  // Display the image to the browser
    //Check to see if we can find the image
    if ($image === false) {
        die ('Unable to find image');
	}
    imagedestroy($image);
    break;
  case "gd2":
    $image = open_image($image); // Image name from JavaScript passed to the open_image function.
    imagegd2($image);  // Display the image to the browser
    //Check to see if we can find the image
    if ($image === false) {
        die ('Unable to find image');
	}
    imagedestroy($image);
    break;
  case "wbmp":
    $image = open_image($image); // Image name from JavaScript passed to the open_image function.
    imagewbmp($image);  // Display the image to the browser
    //Check to see if we can find the image
    if ($image === false) {
        die ('Unable to find image');
	}
    imagedestroy($image);
    break;
  case "xbm":
    $image = open_image($image); // Image name from JavaScript passed to the open_image function.
    imagepng($image);  // Display the image to the browser
    //Check to see if we can find the image
    if ($image === false) {
        die ('Unable to find image');
	}
    imagedestroy($image);
    break;
  case "xpm":
    $image = open_image($image); // Image name from JavaScript passed to the open_image function.
    imagexpm($image);  // Display the image to the browser
    //Check to see if we can find the image
    if ($image === false) {
        die ('Unable to find image');
	}
    imagedestroy($image);
    break;
  default:
    echo "Unable to find any images.";
}
?>

Thanks for everyone's insight and for help finding those stupid mistakes.

Wayne