Image wont display.

xyn · August 23, 2007

Hey.

I've been working on a security image, and i've hit a problem.

Basically the image is displayed like...

‰PNG  IHDRÈF€LaãIDATxœíÖ¿Kr}Çñïé(åV6XÑÐRQR†-&¢eÑP„$ýMD–M9H4„ÒíÇ¢˜˜PC{fØšh>Câsìé¾oé¢ÃÍç5žã÷:õö wzzÊ¾[ÅO/'„$@X@a „$@X@a „$@X@a „$@X@a „$@X@a „$@X@a „$@X@a „$@X@a „$@X@a „$@X@a „$@X@a „$@X@a „$@X@a „$@X@a „$@X@a „$üô_I$n·;‰Üßßçr9¹\ÞÜÜ¬Õj ƒT*ýøŒN§cŒñ<¿³³SSSS|üíímtt4•J1Æü~EÅ¾EñxÜãñ\^^~ ¯®®niiÑh4F£±²²²0¹ôà·¢Ñ¨Ûí¾ººŠÇãŒ±ºººîîîñññ†††O'0ÆœNgkkë×ÃËØäÇ‰k›bÇÇÇf³Ùív§R©ŽŽŽöööL&sqqa³ÙÆÆÆÎår^¯Wp1|Tõép‹Åâr¹‰D[[›J¥ây> ÙíöÒá¿ÉårMMMd2¥R©T*Óéôîî®Åbñx<ÿwjss³¼Ç‰œHßXççç6›M&“ÍÍÍ †‹Ùlöììl}}=‹½¿¿Går¹Ïç›œœ,âóùjkkŸžžÃƒÁàÒÒÏóÓÓÓÃÃÃÉ¿„ëëk‡Ãq{{[ÆÂûûûN§S&“ÍÌÌfŒùýþ•••ÕÕU™L600 8ÕØØ …îîîšššÊx¨˜‰ñõúúj·ÛcóóóÅÿ$‰Db0666z{{GL&ÓÃÃC8.\‰F£777&“©tøòòr>ŸŸ)TÅëìì\[[+þKÉdÒétr·°°P¼0cL¯×/..rçp8^^^Ífs>ŸßÚÚúÓ'ŠŸÃ:<::Ü2õõõ@ ‹ýéCENŒaƒAÆX__ßïQ(jµ:?>>2Æ²ÙìÉÉ‰ZV(Ÿïïïÿ¾}Y$aŒ ÞUÅôz=c, ®ó

that. and I'm not sure why. my pages are.

jp4.php (creates the image via function):

<?php
function create_security_image()
{
#
#	Security image; select the font
#
$font = "C:\WINDOWS\fonts\tahoma.ttf";

#
#	The arrays
#
$text = array('A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); 

$color_array = array('F4F4F4', 'FFFFFF', '000000', '464646', 'E8E8E8', '333333', '666666', '999999');

#
#	Select the background image
#
$num = rand(1,3);
$img = ImageCreateFromJPEG("bg_" . $num . ".JPG");

#
#	Create the unique id, using the text array
#
$length = 7;
$text_str = "";
for($i=0; $i<$length; $i++)
{
$text_str .= $text[rand(0, 26)];
}

#
#	Create a session to match the string
#
$_SESSION['security_key'] = $text_str;

#
#	Create the random font size. colour and angle
#
$size  = "16pt";
$angle = rand(-5, 5);
$color_pad = $color_array[rand(0, count($color_array))];
$color = ImageColorAllocate($img, $color_pad{0}.$color_pad{1}, $color_pad{2}.$color_pad{3}, $color_pad{4}.$color_pad{5});

#
#	Deternmine ctext size, and use the dimentions to get x/y co-ordinates
#
$text_size    = imagettfbbox($size, $angle, $font, $text_str);
$image_width  = ($text_size[2]-$text_size[0]);
$image_height = ($text_size[5]-$text_size[3]);
$dim_x = (imagesx($img)/2)-($image_width/2);
$dim_y = (imagesy($img))-($image_height/2);

#
#	Add the text to the image
#
imagettftext($img, $size, $angle, $dim_x, $dim_y, $color, $font, $text_str);

#
#	Set the headers
#
header("Content-Type: image/png");
ImagePNG($img); 

#
#	destroy the image
#
imagedestroy($img);
}
?>

jp5.php (creates the form inserts the image and matches the strings):

<?php
ob_start();
session_start();
include("jp4.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="image/png; charset=iso-8859-1" />
<title>Demo Image</title>
</head>

<body>
<?php
if(!@$_POST['submit'])
{
?>
<form name="imgForm" method="POST" action="<?=$_SERVER['PHP_SELF'];?>">
<?php create_security_image(); ?><br />
<bR />
Enter the image:
<input typ="text" name="imagecode" value="" />
<input typ="submit" name="submit" value="submit" />
</form>
<?
}
else
{
if($_POST['imagecode'] == $_SESSION['security_key'])
{
	echo("CORRECT");
	unset($_SESSION['security_key']);
}
else
{
	echo("INCORRECT!");
	?>
<form name="imgForm" method="POST" action="<?=$_SERVER['PHP_SELF'];?>">
<?php create_security_image(); ?><br />
<bR />
Enter the image:
<input typ="text" name="imagecode" value="" />
<input typ="submit" name="submit" value="submit" />
</form>
	<?
}
}
?>
</body>
</html>
<?php
ob_end_flush();
?>

zq29 · August 23, 2007

You'll need to display it with the IMG tag:

<img src='image.php' alt='' title='' border='0px' />

You'd also need the image header in your file that generates the image also:

header("Content-Type: image/jpeg");

xyn · August 23, 2007

of course i do. lol

thanks for spotting that.

tibberous · August 23, 2007

Change it to:

header("Content-Type: image/png\n\n");

Tested and works.

xyn · August 23, 2007

k.. but it works anyway

xyn · August 23, 2007

I've got one small problem; basically my image.php sets the KEY

into a SESSION, and i'm having a small problem trying to get the

SESSION to keep the correct key!

my Image.php

<?php
#
#	Security image; select the font
#
$font = $_SERVER['DOCUMENT_ROOT'] . "/includes/fonts/tahoma.ttf";

#
#	The arrays
#
$text = array('A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); 

$color_array = array('000000', '333333', '666666', '999999');

#
#	Select the background image
#
$img = imagecreatefromjpeg($_SERVER['DOCUMENT_ROOT'] . "/images/gd_bg.jpg");

#
#	Create the unique id, using the text array
#
$length = 7;
$text_str = "";
for($i=0; $i<$length; $i++)
{
$text_str .= $text[rand(0, 26)];
}

#
#	Create a session to match the string
#
$_SESSION['security_key'] = $text_str;

#
#	Create the random font size. colour and angle
#
$size  = "16pt";
$angle = rand(-5, 5);
$color_pad = $color_array[rand(0, count($color_array))];
$color = ImageColorAllocate($img, $color_pad{0}.$color_pad{1}, $color_pad{2}.$color_pad{3}, $color_pad{4}.$color_pad{5});

#
#	Deternmine ctext size, and use the dimentions to get x/y co-ordinates
#
$text_size    = imagettfbbox($size, $angle, $font, $text_str);
$image_width  = ($text_size[2]-$text_size[0]);
$image_height = ($text_size[5]-$text_size[3]);
#$dim_x = (imagesx($img)/2)-($image_width/2);
#$dim_y = (imagesy($img))-($image_height/2);
$dim_x = 20;
$dim_y = 20;

#
#	Add the text to the image
#
imagettftext($img, $size, $angle, $dim_x, $dim_y, $color, $font, $text_str);

#
#	Set the headers
#
header("Content-Type: image/jpeg\n\n");
imagejpeg($img); 

#
#	destroy the image
#
imagedestroy($img);
?>

My registration page:

<form name="signUp" method="POST" action="/members/account/1/register.php">
<table width="544" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#E8E8E8">
  <tr>
    <td width="48" height="29" class="regbottom"> </td>
    <td width="144" height="29" background="/images/tab_0.jpg"><div align="center" class="heading">Account Details</div></td>
    <td width="12" height="29" class="regbottom"> </td>
    <td width="144" height="29" background="/images/tab_1.jpg"><div align="center" class="text"><strong>Privacy Settings</strong></div></td>
    <td width="12" height="29" class="regbottom"> </td>
    <td width="145" height="29" background="/images/tab_1.jpg"><div align="center" class="text"><strong>Your Profile</strong></div></td>
    <td width="49" height="29" class="regbottom"> </td>
  </tr>
  <tr>
    <td colspan="7" class="regmain"><div id="regmainbody">
      <table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td height="20" colspan="2" class="text">All fields marked with <font color="#20A3F0">*</font> are mandatory, and must not be left blank.</td>
          </tr>
        <tr>
          <td width="250" height="20" class="text">Username:</td>
          <td width="250" height="20" class="text"> </td>
        </tr>
        <tr>
          <td height="20" class="text"><input type="text" name="username" class="formfield" /></td>
          <td height="20" class="text"> </td>
        </tr>
        <tr>
          <td width="250" height="20" class="text">Password:</td>
          <td width="250" height="20" class="text">Confirm password:</td>
        </tr>
        <tr>
          <td width="250" height="20" class="text"><input type="password" name="password" class="formfield" /></td>
          <td width="250" height="20" class="text"><input type="password" name="confirm_password" class="formfield" /></td>
        </tr>
        <tr>
          <td width="250" height="20" class="text">E-mail address:</td>
          <td width="250" height="20" class="text">Confirm e-mail address:</td>
        </tr>
        <tr>
          <td width="250" height="20" class="text"><input type="text" name="email" class="formfield" /></td>
          <td width="250" height="20" class="text"><input type="text" name="email_confirm" class="formfield" /></td>
        </tr>
        <tr>
          <td width="250" height="20" class="text">Date of Birth:</td>
          <td width="250" height="20" class="text"></td>
        </tr>
        <tr>
          <td width="250" height="20" class="text">--</td>
          <td width="250" height="20" class="text"></td>
        </tr>
        <tr>
          <td width="250" height="20" class="text">Security Image:</td>
          <td width="250" height="20" class="text"></td>
        </tr>
        <tr>
          <td height="20" class="text"><img src="/includes/image.php" width="200" height="70" alt="Security image" border="0"/></td>
          <td height="20" class="text"></td>
        </tr>
        <tr>
          <td width="250" height="20" class="text"><?=$_SESSION['security_key'];?></td>
          <td width="250" height="20" class="text"></td>
        </tr>
        <tr>
          <td width="250" height="20" class="text"><strong>Terms and Conditions</strong></td>
          <td width="250" height="20" class="text"></td>
        </tr>
        <tr>
          <td height="20" colspan="2" class="text"><div id="terms"><?php
          include_once($_SERVER['DOCUMENT_ROOT'] . "/files/terms.php");
	  ?></div></td>
          </tr>
        <tr>
          <td height="20" colspan="2" class="text"><input name="terms" type="checkbox" value="true" /> 
            I have <strong>read</strong>, <strong>understood</strong> and <strong>accept</strong> the terms and conditions</td>
          </tr>
        <tr>
          <td height="10" colspan="2" class="text"> </td>
        </tr>
        <tr>
          <td height="20" colspan="2" class="text"><a href="javascript:document.signUp.submit();"><img src="/images/submit.jpg" alt="Continue to the next step" width="87" height="23" border="0" /></a></td>
        </tr>
      </table>
    </div></td>
  </tr>
</table>
</form>

xyn · August 23, 2007

k.. but it works anyway

I did bump into another problem below; i never felt the need to create a new post:

Sign In

Image wont display.

Recommended Posts

xyn

Link to comment

Share on other sites

zq29

Link to comment

Share on other sites

xyn

Link to comment

Share on other sites

tibberous

Link to comment

Share on other sites

xyn

Link to comment

Share on other sites

xyn

Link to comment

Share on other sites

xyn

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information