[RESOLVED] error in saving a PNG output from imagecreatefrompng function

yekis

currently i have two files

1) workingscript.html --> html form
2) redirection.php --> page where the created (png) file is displayed on the browser...

problem (@ redirection.php): when i try to save the created image (png) file in my hard disk (right click > save picture as) ....i cannot to preview/open the png file that i just earlier saved in my hard disk

    [B]See  figure_1.jpg    [/B]               
           output png image at redirection.php
                [url]http://www.geocities.com/yekis/figure_1.jpg[/url]

  [B]  See figure_2.jpg    [/B]
           Saving the image as outputPNGImage.png in my hard disk
                [url]http://www.geocities.com/yekis/figure_2.jpg[/url]

   [B] See figure_3.jpg           [/B]
          There was an error displaying outputPNGImage.png that was just earlier saved in my hard disk
          [url]http://www.geocities.com/yekis/figure_3.jpg[/url]

anyway, here's my code

1) workingscript.html

<html>
<head>


<SCRIPT LANGUAGE="JavaScript">

function textCounter(field, countfield, maxlimit) {
if (field.value.length > maxlimit) // if too long...trim it!
field.value = field.value.substring(0, maxlimit);

else 
countfield.value = maxlimit - field.value.length;
}

</script>

<meta name="author" content="Rexcel Cariaga">
<link href="xampp.css" rel="stylesheet" type="text/css">
<title>Buy and Sell @ Cube iTV</title>


</head>
<body>
<img src="background.png">
<form name="ff" action="redirection.php" method="post">
<table width="400" border="0">
<tr>
<td width="200"></td>
<td width="200"></td>
</tr>
<tr>
<td>First Name of Seller</td>
<td><input name="text" type="text" size="25" maxlength="14"></td>
</tr>
<tr>
<td><p>Contact Number</p>
</td>
<td><label>
<input name="contact" type="text" id="contact" value="091XXXXXXXX" size="25" maxlength="12">
</label></td>
</tr>
<tr>
<td>Product Name</td>
<td><label>
<input name="product" type="text" id="product" size="25" maxlength="25">
</label></td>
</tr>
<tr>
<td>Description</td>
<td><label>

<font size="1" face="arial, helvetica, sans-serif"> ( You may enter up to 100 characters. )<br>
<textarea name="description" id="description" wrap=physical cols=28 rows=4 onKeyDown="textCounter(this.form.description,this.form.remLen,100);" onKeyUp="textCounter(this.form.description,this.form.remLen,100);"></textarea>

<br>
<input readonly type=text name=remLen size=3 maxlength=3 value="100"> characters left</font>
<br>
</label></td>
</tr>
<tr>
<td>Price (PHP)</td>
<td><label>
<input name="price" type="text" id="price" size="25" maxlength="7">
</label></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><center><input type="submit" name="submit" value="Submit">
</center></td>
</tr>
</table>
</form>
<p>
</body>
</html>

2) redirection.php

<?php
### when the user presses the submti button then use gd functions... 
if (isset($_POST['submit'])) 
{
header("Content-type: image/png");

$name = $_POST['text']; # get value for name...
$contact = $_POST['contact']; # get value for contact...
$product = $_POST['product']; # get value for product...
$price = $_POST['price']; # get value for price...
$description = $_POST['description']; # get value for price...

$im     = imagecreatefrompng("background.png");
$white = imagecolorallocate($im, 255, 255, 255);

#loads font 
   $font = "ariblk.ttf"; 

# this is for product 
     // imagestring($im, 5, 190, 20, $product, $white);
	 imagettftext($im, 18, 0, 10, 40, $white, $font, $product);

# this is for description...

  $text = $description;
  $new_text = wordwrap($text, 15, "\n", true);
  imagettftext($im, 18, 0, 10, 90, $white, $font, $new_text);

# this is for name
    //imagestring($im, 5, 300, 300, $name, $white);
     imagettftext($im, 14, 0, 300, 315, $white, $font, $name);

# this is for contact number
//imagestring($im, 5, 300, 320, $contact, $white);
     imagettftext($im, 14, 0, 300, 340, $white, $font, $contact);

# this is for price
 //imagestring($im, 5, 370, 80, $price, $white);
   imagettftext($im, 17, 0, 363, 88, $white, $font, $price);

imagepng($im);
imagedestroy($im);
}
?>


<html>
<head>


<meta name="Rexcel Cariaga" content="Interactive PNG Creation" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

i have also attached background.png that i'm currently using in my script..tnx!!

http://www.geocities.com/yekis/background.png

cahva

I dont know why it even shows in browser but you should not output anything after the image is printed to screen. Make this finetune:

imagedestroy($im);
die(); // exit the script so it doesnt output anything after

bradgrafelman

As cahva points out, you can't output data after you output the image. You either output HTML, or you output an image - you can't combine the two (ok so technically there's a way to embed image data inside HTML, but you're still outputting pure HTML in that case).

yekis

already added the code..but i can't still save the image...i'm wondering how come it is possible for me to save the created image at this URL (w/c also uses the GD function)...

"http://www.nyphp.org/content/presentations/GDintro/gd16.php"

thanks a lot!

bradgrafelman

What do you mean you "already added the code" ?

yekis

already added the code below in my script

imagedestroy($im); 
die(); // exit the script so it doesnt output anything after

but nothing still happens..i can;t still save the created image...

bpat1434

I'm not 100% sure that this may actually work.

Try actually saving the image to the server's HDD by passing another argument to the imagepng() function telling it where to save. Then actually display an <img> tag, and see if that works.

So....

$name = time().'.png';
$save_path = realpath(dirname(__FILE__).'/images/'.$name);
imagepng($im, $save_path);
imagedestroy($im);

echo '<img src="./images/'  . $name . '" />';

yekis

thanks but it didn't work....(i simply copied and paste the php code you gave and made no modifications...or should i modify it in one way or another)

btw, here's the a part of a php code (iart.php) that i got from a site that enabled me to saved the created image....i believe that this code just simply displays the created image (i just don't know how to modify it to suit my php code)..hehe..sorry..php newbie here...

<p>
		<h1><?php echo $TEXT['iart-head']; ?></h1>

	<img width="520" height="320" src="iart.php?img=1&text=<?=urlencode($text)?>" alt=""><p class="small">
	<?=$TEXT['iart-text1']?><p>

full source for code iart.php

<?php



	$text=$_REQUEST['text'];
    if($text=="") $text="";
    if($_REQUEST['img']!=1)
    {
?>
<html>
	<head>
		<meta name="author" content="Kai Oswald Seidler">
		<link href="xampp.css" rel="stylesheet" type="text/css">
		<title></title>
	</head>

<body>
	&nbsp;<p>
	<h1>&nbsp;</h1>

<img width="520" height="320" src="iart.php?img=1&text=<?=urlencode($text)?>" alt="">
	<p class="small">

<p>
		<form name="ff" action="iart.php" method="get">
			<input type="text" name="text" size="30">
			<input type="submit" value="Submit">
		</form>
		<p>

</body>
</html>
<?php
		exit;
	}

$fontfile = "./AnkeCalligraph.TTF";

$size = 9;
$h = 320;
$w = 520;

$im  =  ImageCreate($w, $h);

$fill = ImageColorAllocate($im, 251, 121, 34);
$light = ImageColorAllocate($im, 255, 255, 255);
$corners = ImageColorAllocate($im, 153, 153, 102);
$dark = ImageColorAllocate($im, 51, 51 , 0);
$black = ImageColorAllocate($im , 0, 0 , 0);

$colors[1] = ImageColorAllocate($im, 255, 255, 255);
$colors[2] = ImageColorAllocate($im, 255 * 0.95, 255 * 0.95, 255 * 0.95);
$colors[3] = ImageColorAllocate($im, 255 * 0.9, 255 * 0.9, 255 * 0.9);
$colors[4] = ImageColorAllocate($im, 255 * 0.85, 255 * 0.85, 255 * 0.85);

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

srand(time());

$c = 1;
$anz = 10;
$step = (4 / $anz);
for ($i = 0; $i < $anz; $i += 1) {
	$size = rand(7, 70);
	$x = rand(-390, 390);
	$y = rand(-100, 400);
	$color = $colors[$c];
	$c += $step;
	ImageTTFText($im, $size, 0, $x, $y, $color, $fontfile, $_GET['text']);
}

ImageLine($im, 0, 0, $w - 1, 0, $light);
ImageLine($im, 0, 0, 0, $h - 2, $light);
ImageLine($im, $w - 1, 0, $w-1, $h, $dark);
ImageLine($im, 0, $h - 1, $w - 1, $h - 1, $dark);
ImageSetPixel($im, 0 , $h - 1, $corners);
ImageSetPixel($im, $w - 1, 0, $corners);

ImagePNG($im);
exit;
?>

so basically, that's the code that i got from a certain site that allows the users to create their own "interactive text art" image and enables them to save it on their local hard disk

i just don't know how incorporate/modify the php code in my script so the users can also save the created image in my php file...

tnx for reply guys, i'm really learning here!!!

bpat1434

Okay, I can't seem to get this working, and I'm not sure why. I've tried almost everything. Once again, I had to resort to saving it on the server, then displaying the <img> tag and doing it that way. I tried using an inline disposition, and everything. The closest I came to having it download for you was to add a "download" button on your form, and then catch it in the redirection.php script. Here's my code:

workingscript.html

<html>
<head>
	<SCRIPT LANGUAGE="JavaScript"><!-- // --><![CDATA[
		function textCounter(field, countfield, maxlimit) {
			if (field.value.length > maxlimit) // if too long...trim it!
				field.value = field.value.substring(0, maxlimit);
			else 
				countfield.value = maxlimit - field.value.length;
		}
	// ]]></script>

<meta name="author" content="Rexcel Cariaga">
<title>Buy and Sell @ Cube iTV</title>
</head>
<body>
	<img src="background.png">
	<form name="ff" action="redirection.php" method="post">
		<table width="400" border="0">
			<tr>
				<td width="200"></td>
				<td width="200"></td>
			</tr>
			<tr>
				<td>First Name of Seller</td>
				<td><input name="text" type="text" size="25" maxlength="14"></td>
			</tr>
			<tr>
				<td><p>Contact Number</p></td>
				<td><label>
				<input name="contact" type="text" id="contact" value="091XXXXXXXX" size="25" maxlength="12"></label></td>
			</tr>
			<tr>
				<td>Product Name</td>
				<td><label>
				<input name="product" type="text" id="product" size="25" maxlength="25"></label></td>
			</tr>
			<tr>
				<td>Description</td>
				<td><label><font size="1" face="arial, helvetica, sans-serif"> ( You may enter up to 100 characters. )<br>
					<textarea name="description" id="description" wrap=physical cols=28 rows=4 onKeyDown="textCounter(this.form.description,this.form.remLen,100);" onKeyUp="textCounter(this.form.description,this.form.remLen,100);"></textarea><br>
					<input readonly type=text name=remLen size=3 maxlength=3 value="100"> characters left</font></label></td>
			</tr>
			<tr>
				<td>Price (PHP)</td>
				<td><label>
				<input name="price" type="text" id="price" size="25" maxlength="7"></label></td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td><center><input type="submit" name="submit" value="Submit">&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" name="submit" value="Download"></center></td>
			</tr>
		</table>
	</form>
</body>
</html>

redirection.php

<?php
### when the user presses the submti button then use gd functions...
if(isset($_POST) && !empty($_POST) && $_POST['submit'] != 'Download')
{
	$image = genImage();

header('HTTP/1.0 200 Ok');
header('Content-Type: image/png');
header('Content-Length: ' . strlen($image));
header('Content-Disposition: inline; filename=' . $name);

print $image;
}
elseif($_POST['submit'] == 'Download')
{
	$image = genImage();

header('Content-Type: image/png');
header('Content-Length: ' . strlen($image));
header('Content-Disposition: attachment; filename=' . $name);

print $image;
}
else
{
	header('Content-Type: text/plain');

echo 'No posted information :(';
}

function genImage()
{
	$name        = $_POST['text'];        # get value for name...
	$contact     = $_POST['contact'];     # get value for contact...
	$product     = $_POST['product'];     # get value for product...
	$price	     = $_POST['price'];       # get value for price...
	$description = $_POST['description']; # get value for description...

$im    = imagecreatefrompng("background.png");
$white = imagecolorallocate($im, 255, 255, 255);

#loads font
$font = "ariblk.ttf";
imageloadfont($font);

# this is for product
imagettftext($im, 18, 0, 10, 40, $white, $font, $product);

# this is for description...
$description = wordwrap($description, 15, "\n", true);
imagettftext($im, 18, 0, 10, 90, $white, $font, $description);

# this is for name
imagettftext($im, 14, 0, 300, 315, $white, $font, $name);

# this is for contact number
imagettftext($im, 14, 0, 300, 340, $white, $font, $contact);

# this is for price
imagettftext($im, 17, 0, 363, 88, $white, $font, $price);

$name = time().'.png';

$path = './images/'.$name;

ob_start();
imagepng($im);
$image = ob_get_contents();
ob_end_clean();

imagedestroy($im);

return $image;
}

?>

I even tried removing the closing php tag thinking white-space was what was destroying the image. But that wasn't it. I even tried different file encodings (Unicode, ISO-8859-1, ANSI) and that didn't work. All I can say is that this is an alternative to how you want it to work. It's not the best, but it's all I can come up with.

yekis

i got the following errors when i press the submit or download button

Warning: imageloadfont() [function.imageloadfont]: Error reading font in C:\xampp\htdocs\redirection3.php on line 44 (weird but i have my font saved in my server)

Warning: Cannot modify header information - headers already sent by (output started at C:\xampp\htdocs\redirection3.php:44) in C:\xampp\htdocs\redirection3.php on line 7

Warning: Cannot modify header information - headers already sent by (output started at C:\xampp\htdocs\redirection3.php:44) in C:\xampp\htdocs\redirection3.php on line 8

Warning: Cannot modify header information - headers already sent by (output started at C:\xampp\htdocs\redirection3.php:44) in C:\xampp\htdocs\redirection3.php on line 9

Warning: Cannot modify header information - headers already sent by (output started at C:\xampp\htdocs\redirection3.php:44) in C:\xampp\htdocs\redirection3.php on line 10

bpat1434

Look at the first error. The font can't be found. Upload the font to where the script is and try again.

yekis

got it!! it works

just simply deleted this line of code...heheh

imageloadfont($font);

tnx a lot!!!