Hello there! :)

For the last couple of days, I've been working on a new project. The idea is to create a virtual adoptable pets system integrated with my forums. While I have much of it covered already, I am new to dynamic images and the GD library. So I decided to write a little sample script for practice purposes.

I took a picture of a "pet", which is saved in PNG format and has a transparent background, as the source. It is anti-aliased. The original looks just fine. No white dots around the image and no rough edges. Just smooth, and pretty. :)

This is my current script:

<?php
if(!isset($_GET) OR !isset($_GET['name']) OR !isset($_GET['owner'])) {
	header('location: http://arwym.com/wym');
	die();
} else {
	$petname = $_GET['name'];
	$petowner = $_GET['owner'];
	
	$imagesource = 'petimg/kitsune01.png';
	$image = imagecreatefrompng($imagesource);
	$bg = ImageColorAllocate($image, 255, 0, 255);
	$textshadow = ImageColorAllocate($image, 0, 0, 0);
	$textcolor = ImageColorAllocate($image, 255, 255, 255);
	$textfont = 'macro_normal.ttf';
	imagefill($image, 0, 0, $bg);
	imagecolortransparent ($image, $bg);

	imagettftext($image, 15, 0, 23, 23, $textshadow, $textfont, $petname);
	imagettftext($image, 15, 0, 21, 21, $textcolor, $textfont, $petname);
	
	header('content-type: image/png');
	imagepng($image);
	imagedestroy($image);
}
?>

Since it is just for practice, I didn't make it too complicated. What the script does is take the requests for the pet's and the owner's names. Then it creates an image from a PNG (the pet image I mentioned), adds the pet's name on top of it (I am not using the owner's name in the script, until I can solve the current problems) with a TTF font (note that the text is white), and generates the image. The image does not get saved.

The original script didn't have the following lines: $bg = ImageColorAllocate($image, 255, 0, 255);

imagefill($image, 0, 0, $bg);
imagecolortransparent ($image, $bg);

As a result, the image's background resulted white, and not transparent. So the only solution I could find was to add that. However, the problems still persist: image quality is messed up for some reason. It looks very ugly, with white pixels around, rough edges; and the text, no matter what I try, tends to look strange.

This is the resulting image after filling a form:

http://arwym.com/wym/adoptables/pet.php?name=Pet Name Here&owner=Arwym

I don't know what I'm doing wrong, so if you could enlighten me or help me find a solution... If it helps, I am using a version of PHP which is 5 or above. I believe GD comes bundled with it. Am I right? As for the GD version, I am not sure, but if it helps, I could find out.

Also, I am viewing the image with Mozilla Firefox, so I doubt this has much to do with the browser? Unless I am missing something, but I frequent many websites where dynamic image scripts are used, and often the images are PNG's, and look perfectly fine. So I am assuming that either it is my own mistake, or something isn't quite right with something else.

My major concern is the quality of the image. I want it to look as smooth and pretty as the original. :( I could probably live with the rest, or work with some alternative (if any).

Any help is truly, very much appreciated.

I'm sorry. I don't like to "bump", but this is about to reach the second page and I really need help with this. So if anybody could at least try to help, I'd really appreciate it.

Thanks.

I had a look at the image generated by your program and I didn't see a problem with the quality. I also tried a version of your code and the image it produced also seemed fine. Other than using my own image, the only other significant change was to use arial.ttf If you have a problem, it would seem to be the rendering not the PHP code. My GD extension is php_gd2.dll version 5.2.0 dated 02/11/2006.

Chris

Thank you for responding. :)

Would it be too much if I ask you to take a screenshot of how you see the image I generated? Could it be that I see something different from the rest? Because in my screen, the white text has magenta pixels around it, and the edges of the animal have orange pixels surrounding it. That doesn't happen in the original. This is the original, if you want to compare:

http://arwym.com/wym/adoptables/petimg/kitsune01.png

LOL, yeah. It's the same I see. And I have I problem with the quality. As you can see in the original picture, and placing the image against a dark background, there are problems. The image is not being rendered well.

This article has been dead for over six months. Start a new discussion instead.