Work with pictures
There are more possible ways how to work with graphics, but the most common is the GD library.
We have to create a virtual picture first. We can create an empty picture (using the imagecreatetruecolor function), or we can start with some picture from a file in a directory or we can use a picture from somewhere on the web (for example by using the imagecreatefromjpeg function).
Using both methods, we will make a memory reservation for the picture depending on the picture size (and color depth). All graphics operation outside the declared picture are ignored (for example, part of a circle), but most important, in distinction of some other languages, it cannot cause any problems with writing outside the memory reserved for the picture.
We can use a line drawing, text writing and another graphics function for this virtual image, till you decide to generate them to an output. Please remember, that everything will be done on the server, so for example fonts have to be installed on the server.
After you have the picture prepared, you can stream it directly to output (the first example today), or generate a file on the server (both using one of imagejpeg, imagegif or imagepng function). In the case of stream, the function should correspond with the http header, as is defined before the picture is generated.
If you generate stream directly instead of saving a picture on the server, your php script should have a different structure - no html headings, only php functions without any "echo" or "print" command, and even http header should be set to "image/type" (we didn't change it yet; default value is "text/html"). Then, we can use this php script as an image:
<img src="demo.php">
The following example is from the php manual (php.net/manual). Note, that all the GD function uses the virtual picture address as a parameter - we can work with more pictures simultaneously. Another note, all the colors should be defined before use. The reason is, that in the time of this library appears, most pictures had no more than 256, so it use "color palette" - table with list of all colors used. For the RGB color definition, the color components in this example are written in the hexadecimal code - its' entry starts with the 0x letters, following two hexadecimal letters, which ale 0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F. The 0x00 is zero, the 0xFF is 15*16+15=255 - in case of color, this is the maximum lighting. You can try for example change the line
$black = imagecolorallocate($im, 0x00, 0x00, 0x00);
to
$black = imagecolorallocate($im, 0xFF, 0x00, 0x00);
and watch, what will happened (R-G-B as FF-00-00 should create red color).
The first example:
|
Recapitulation: Direct picture generation has no html headers and there must be no "echo" or "print" command, so we cannot use debugging messages.
On the next example, we will start with an existing image. If you like to use image in your directory, you have to save there one as the first. For example, nice pictures are here . The result we can show using
<img src="bears.php">
And here is our bears.php script:
<?php
header('Content-Type: image/jpeg');
$img = @imagecreatefromjpeg('bears.jpg');
$tmp = imagecreatetruecolor(320,200);
imagecopyresampled($tmp,$img,0,0,0,0,320,200,imagesx($img),imagesy($img));
imagejpeg($tmp);
imagedestroy($img);
imagedestroy($tmp);
?>
|
PHP supports one error control operator: the at sign (@). When prepended to an expression in PHP, any error messages that might be generated by that expression will be ignored. In the case of no text output is possible, this supression is important.
The header now define, that output will be jpeg, so the function imagejpeg has to be used. Two virtual images are created. For the copy of the image, the imagecopyresampled function is used. Note, that it can both increase and decrease the picture size. The imagesx (image-size-x) will return the horizontal image size. The rest is the same.
The next example will write the result to the file as well as to stream:
<?php
header('Content-Type: image/jpeg');
$src = @imagecreatefromjpeg("data/".$_GET["file"]);
$dst = imagecreatetruecolor(100,75);
imagecopyresampled($dst, $src, 0, 0, 0, 0, 100, 75, imagesx($src), imagesy($src));
imagejpeg($dst,"data/".$_GET["file"],60);
imagejpeg($dst);
imagedestroy($dst);
imagedestroy($src);
?>
|
It will work with an image, which have to be in the data directory before use. This picture should be called using the GET method, with the "file" variable set, for example
<img src="test.php?file=bears.jpg">
Now, try some of other function from the http://www.php.net/manual/en/ref.image.php list.
Another possibility is to create pictures (mainly graphs) on the client side. A typical solution is to use the Javascript canvas object.
Fonts.
The most usefull solution is to use the web server fonts, but this is problematic for a free web hosting. Try, if you can upload a font. You can ask Google for some fonts (in 2018, it founds this page).
The next example is copied from the php manual:
<?php
// Set the enviroment variable for GD
putenv('GDFONTPATH=' . realpath('.'));
// Name the font to be used (note the lack of the .ttf extension)
$font = 'ariblk';
//$font = 'ariblk.ttf';
// Set the content-type
header('Content-Type: image/png');
// Create the image
$im = imagecreatetruecolor(400, 50);
// Create some colors
$white = imagecolorallocate($im, 255, 255, 255);
$grey = imagecolorallocate($im, 128, 128, 128);
$black = imagecolorallocate($im, 0, 0, 0); //not used
$blue = imagecolorallocate($im, 33, 55, 255);
imagefilledrectangle($im, 0, 0, 399, 49, $white);
// The text to draw
$text = 'Testing...'; // try to change this
// Replace path by your own font path
//$font = 'arial.ttf'; ... font is already set
// Add some shadow to the text
imagettftext($im, 20, 0, 13, 34, $grey, $font, $text);
// Add the text
imagettftext($im, 20, 0, 10, 31, $blue, $font, $text);
// Using imagepng() results in clearer text compared with imagejpeg()
imagepng($im);
imagedestroy($im);
?>
|
gf.php. Note: do not forged to upload the .ttf font file to the same directory. Check, that before <?php is no any character, as a space or empty line.
array imagettftext ( resource $image , float $size , float $angle , int $x , int $y , int $color , string $fontfile , string $text )
size in points (typical is 12)
angle - a rotation, 0 is horizontal
x, y - position of the lower left corner of defining rectangle
(some fonts contains empty space)
...
text in the UTF8. Strange. Basic ASCII can be used (characters
no. 32 (space) to 126 (tilda) ).