Lecture 8: Images. CS 383 Web Development II Monday, February 19, 2018

Size: px

Start display at page:

Download "Lecture 8: Images. CS 383 Web Development II Monday, February 19, 2018"

Russell Armstrong
5 years ago
Views:

1 Lecture 8: Images CS 383 Web Development II Monday, February 19, 2018

2 Images We can dynamically create images in PHP through the GD library o GD originally stood for gif draw o At one point, GIF support was dropped from GD, so it really stood for nothing, but they went with graphics draw to appease everybody who asked o GIF suppose has since been readded, but they continue to maintain that it officially stands for nothing o PHP s documentation for GD makes no mention of what GD actually stands for at all 1

3 Images Note that, unlike everything else we will talk about this semester related to PHP, the GD libraries are NOT included with default PHP Most OSs have an easy way of installing it o For example, in aptitude on Ubuntu, there is a package: php5-gd 2

4 Images The following image formats are supported by GD: o JPEG o PNG o GIF o XBM o XPM (read only; no write to XPM files) o WBMP o WebP 3

5 Getting Started First, we have to decide what is going to happen, in the end, with our generated image o We can save the image somewhere on the server o We can produce the image through a browser, to either display or forcedownload In this case, we must set the header for the content-type through PHP as we did in the previous class Although it may appear to be strange to load an image with the PHP extension, we can embed the image with something like <img src="generate_image.php"> 4

6 Getting Started Then, we have to decide what we want to start with: o A blank canvas* : imagecreate($width, $height) o An existing image however, GD is not smart enough to determine what type of file an image is, so we need to write our code with the most appropriate function: imagecreatefromjpeg($filename) imagecreatefrompng($filename) imagecreatefromgif($filename) etc. * Canvas is not an official term for GD/PHP, but I will use it to more easily refer to what we are working with For all of these functions, it returns a resource value that we will need to use as an argument for nearly all of the other function calls that we ll be making 5

7 The Canvas (0,0) ($width - 1, 0) Our images use a coordinate system where each coordinate represents a pixel. (0, $height - 1) ($width - 1, $height - 1) 6

8 The Canvas If we created the image from a blank canvas, we already know the dimensions If we started from an existing image, we don t know o The function call getimagesize($filename) returns an array o $a[0] = width, $a[1] = height o $a[2] includes a constant for the image type (such as IMG_PNG) o $a[3] is a text string that has height="yyy" width="xxx" which can be included directly inside an <img> tag o $a["mime"] includes a mime type, such as image/png, that can be included directly inside a header() call We can also use imagesx($resource) to get an image s width and imagesy($resource) to get an image s height 7

9 Color Allocation To use colors, you must create a color resource with the function: imagecolorallocate($resource, $red, $blue, $green) Red, blue, and green are integers between 0 and 255, and match up to the hexidecimal RGB codes we use for colors in HTML/CSS For red: imagecolorallocate($im, 255, 0, 0) 8

10 Color Allocation If you are more familiar with hexidecimal codes, you can convert them to integers o For yellow (HTML: #FFFF99): imagecolorallocate($im, 0xFF, 0xFF, 0x99) We set the result of these functions to variables to use later 9

11 Adding Text To add text to our images, we usually need to have a TrueType font file We use the function: imagettftext($resource, $size, $angle, $x, $y, $color, $fontfile, $text) o $size is point size in GD 2 (our version); it is pixels in GD 1 o For $angle, 0 is normal o $x and $y are the coordinates where (roughly) bottom-left of the character (on the baseline) will be placed 10

12 Adding Text There is no option to automatically center or right-align text to any certain point We must calculate it on our own There is a function called imagettfbbox($size, $angle, $fontfile, $text) This function returns an array with the following numeric keys 11

13 Adding Text Key Corner Position 0 bottom-left X 1 bottom-left Y 2 bottom-right X 3 bottom-right Y 4 top-right X 5 top-right Y 6 top-left X 7 top-left Y 12

14 Adding Text Thus, to calculate the height and width: o Suppose the results of imagettfbbox() are stored in $box o $width = abs($box[4] - $box[0]) o $height = abs($box[5] - $box[1]) From here, you can do the math necessary to center text and right align text, either to the whole document or relative to something else You can also use a loop to determine the largest font-size possible that still allows the text to fit in a certain area 13

15 Adding Shapes image[filled]rectangle($resource, $x1, $y1, $x2, $y2, $color) image[filled]ellipse($resource, $cx, $cy, $w, $h, $color) image[filled]polygon($resource, $points, $numpoints, $color) image[filled]arc($resource, $cx, $cy, $w, $h, $start, $end, $color) image[dashed]line($resource, $x1, $y1, $x2, $y2, $color) imagesetpixel($resource, $x, $y, $color) 14

16 Other Functions imagesetthickness($resource, $thickness) imagecolorat($resource, $x, $y) imagecolorsforindex($resource, $imagecolorat) imagecolortransparent($resource, $color) imagecrop($resource, $rect) -- $rect is an array with the keys "x", "y", "width", and "height 15

17 Order of Adding Components The order that you add items to your image matters If you place text (or anything else) on an image at certain coordinates, and place a rectangle (or anything else) over the same coordinates as you put the text, you cover the text either fully or partially and the only way to get it back is to recall the function that put the text on the first time 16

18 Finishing Up To finish up, we need to use the function appropriate to whatever format we are using to save the file: o imagegif($resource[, $filename]) o imagejpg($resource[, $filename[, $quality]]) o imagepng($resource[, $filename[, $quality]]) Omitting the argument for filename outputs the image directly to the browser; using a filename saves it to the server Quality: o JPG: 0 (worst) to 100 (best); defaults to 75 if omitted o PNG: 0 (no compression) to 9 o If you want to use quality but output to browser, you must set the filename to null, not an empty string 17

19 Finishing Up imagedestroy($resource) should be called when finished to free up any memory associated with the image However, as you should expect, you cannot do anything with the image after imagedestroy is called Note: Even if you create a new image and set it to the same resource variable as a previous image, that does not automatically free up the memory 18

20 Example: Output to Browser <?php header("content-type: image/png"); $im = imagecreatefrompng("picture.png"); // perform other operations imagepng($im); imagedestroy($im);?> 19

21 Example: Force Download <?php header("content-disposition: attachment; filename="downloadedimage.png"); header("content-type: image/png"); $im = imagecreatefrompng("picture.png"); // perform other operations imagepng($im); imagedestroy($im);?> 20

22 Example: Save on Server <?php // you do not set the header since it is not going to the browser $im = imagecreatefrompng("picture.png"); // perform other operations imagepng($im, "savedimage.jpg"); imagedestroy($im);?> 21

This chapter is dedicated to creating graphics interactively on the server. Here,

Holzner_webChqxd 3/23/05 2:11 PM Page 1 Interactive Graphics On the Server This chapter is dedicated to creating graphics interactively on the server Here, we re going to see how to use the GD graphics