Building a picture from scratch and displaying it on a web page but with no write permissions

This page is a tutorial on "Building a picture from scratch and displaying it on a web page but with no write permissions". Our overall method is to use the PHP GD Library and a TrueType font and PHP.

To be clear, you do NOT need write permissions to create pictures with GD and display them and you do not need write permissions to store pictures in MySQL and use our scripts to display them. You DO need write permissions to save the images you create on the server (unless you save them in MySQL) and you DO need write permissions to use PHP file uploading methods if you aim to stick images into online folders. Many experts say this latter creates an unacceptable vulnerability and simply too much risk. The alternatives to this CHMOD 777 free-for-all where strangers are permitted to stick image files on your server are:

Use any of the links at the top of this page and get scripts that "upload" image data into MySQL without write permissions, or just create and display images without trying to save them, like our script below.
Manually stick image files into a folder on your server via any FTP program.
Abandon using all that precious server memory on images—whether in a db or file folder—and store only the URLs to the images. We suggest Picassa or Photobucket as a photo storing app. Both will give you URLs that begin with http or https and end with .jpg, if you look, although most of their data includes links around the URLs which you do not need—but if you leave them, make sure that target="_blank" is placed in all links. The URLs (without links) are what you store in a MySQL database, along with image data like name, size, username, caption, date, etc. There are other photo storing apps:
1. flickr
2. fotki
3. care2connect
4. webshots
5. dotphoto
6. sendphotos
7. smugmug
8. MyPhotoAlbum
9. KodakEasyShareGallery
10. Pbase (not free)
11. Photoshop Express
12. EchoPic
13. JAlbum
14. imageShack
15. Pixa
16. FreeImageHosting
17. iimmgg.com
18. tinypic
19. imgur
20. ipernity.com
21. photoSwarm
22. mejuba.com
23. photodekho.com
24. youphotoshare.com
25. ovi.com
26. monille.com
27. theeasyview.com

The rest of this page assumes you wish to use our "Building a picture from scratch and displaying it on a web page but with no write permissions" script below, and that you are willing to use a TrueType font in the process. We dug up a TrueType font the same way you can: go to your WINDOWS folder and search. We found 389 files to choose from, such as times.ttf, comic.ttf, arial.ttf, etc. Put this and a few others in the folder your script is in so you can experiment. Make sure you get the arial.ttf file so the script below will work right.

As trivial an HTML page as the following can display your created-on-the-fly image in the browser (a width parameter of 100 will turn a large image into a thumbnail, while leaving out parameters will let the image display at its original size, so experiment and have fun with this stuff):

In this particular script, we use create-pic.php as the source attribute in an image tag. SRC is normally where a jpg, png, bmp, or gif goes, of course. But HTML doesn't mind if we use a PHP script instead. In practice there would be a query string that would inform the PHP script what text string we want to display, then we'd GET that string and put it into $c, and we'd dump the $c="here is some text"; line, but create-pic.php was not built for that, although the scripts in write-gif-file-with-php.html and write-jpeg-file-with-php.html and write-png-file-with-php.html ARE built for that.

In the script below, we tell the browser we are making a PNG image, then define the text string to put in it as "here is some text", then define the font as arial and make sure this font file is in the same folder. Then we define the height as 60 and the width as 445 pixels. Note that we used a width of 333 in the <img src="create-pic.php" alt="image" width="333px"> line of the HTML page that will display our created PNG image. If we left out the width parameter, the image would default to 445 pixels wide—what the create-pic.php script defined as the width.

We use the imagecreatetruecolor() function to create the image and put in the width and height so the function knows the size to make the image. We then define some colors for the image to use, with the imagecolorallocate() function. Then we use the imagefill() function to flood fill the image with a color—in this case gray. Now we use the imageline() function to draw a line between the two given points, until the image has a border. Next we use the imagettftext() function to write text to the image using TrueType fonts. We do this twice, first red, then black, which makes a cool drop shadow because we make the red text a couple of pixels offset from the black text. Then we use the imagepng() function to output the PNG image to the browser, although this same function can save a PNG image to a PNG file. Finally we use imagedestroy() to free any memory associated with the image.

The script is called: create-pic.php

<?php

header('Content-Type: image/png');
$c="here is some text";
$font = 'arial.ttf';
$wide = 445;
$high = 60;
$picture = imagecreatetruecolor($wide,$high);
$gray = imagecolorallocate($picture,223,223,223);
$red = imagecolorallocate($picture,255,128,128);
imagefill($picture,0,0,$gray);
$black=imagecolorallocate($picture, 0, 0, 0);
imageline($picture, 0, 0, 0, $high, $black);
imageline($picture, 0, 0, $wide, 0, $black);
imageline($picture, $wide-1, 0, $wide-1, $high-1, $black);
imageline($picture, 0, $high-1, $wide-1, $high-1, $black);
imagettftext($picture, 40, 0, 22, 50, $red, $font, $c);
imagettftext($picture, 40, 0, 20, 48, $black, $font, $c);
imagepng($picture);
imagedestroy($picture);

?>

Free Personal Status Boards (PSB™)

Building a picture from scratch and displaying it on a web page but with no write permissions