In the previous article, we focused on loaded and manipulating images with PHP. We learned how to rotate, resize, scale or flip an image. We also learned about different filters and the convolution matrix. Those tutorials also covered some practical uses of the GD library, like resizing all images in a directory or adding watermarks on multiple images at once. Show
Besides using GD for manipulating regular images, we can also create our own from scratch. We can use different functions in the library to draw basic shapes like ellipses, circles, rectangles, polygons, and simple lines. With some maths, these shapes can create nice patterns. There are also functions available to draw text on the rendered image, which opens up a lot of possibilities. This tutorial will teach you how to draw basic shapes in PHP and how to render text using your favorite font. Here's a preview of what we'll be creating at the end of the post:
Draw Basic Shapes in PHP With GDWe will learn about basic shapes in this section and then cover line thickness, brushes, and line styles later. Draw LinesYou can draw a simple straight line between two given points using the Draw Circles and ArcsThe function Draw Rectangles and PolygonsYou can draw rectangles over an image using the Another function called Putting It Together to Create a DrawingIn the following example, we have used all these functions to create a line drawing with a hut, the sun, and the ground. <?php header("Content-type: image/png"); $img_width = 800; $img_height = 600; $img = imagecreatetruecolor($img_width, $img_height); $black = imagecolorallocate($img, 0, 0, 0); $white = imagecolorallocate($img, 255, 255, 255); $red = imagecolorallocate($img, 255, 0, 0); $green = imagecolorallocate($img, 0, 255, 0); $blue = imagecolorallocate($img, 0, 0, 255); $orange = imagecolorallocate($img, 255, 200, 0); imagefill($img, 0, 0, $white); imagerectangle($img, $img_width*2/10, $img_height*5/10, $img_width*4/10, $img_height*8/10, $red); imagerectangle($img, $img_width*4/10, $img_height*5/10, $img_width*8/10, $img_height*8/10, $red); imagepolygon($img, [$img_width*3/10, $img_height*2/10, $img_width*2/10, $img_height*5/10, $img_width*4/10, $img_height*5/10], 3, $red); imageopenpolygon($img, [$img_width*3/10, $img_height*2/10, $img_width*7/10, $img_height*2/10, $img_width*8/10, $img_height*5/10], 3, $red); imageellipse($img, 100, 100, 100, 100, $orange); imagearc($img, $img_width*3/10, $img_height*8/10, 100, 200, 180, 360, $red); imageline($img, 0, $img_height*8/10, $img_width, $img_height*8/10, $green); imagepng($img); ?> The important thing here is just to figure out the
value of different coordinates. I wanted to draw everything relative to the size of the original image, so I used the Controlling Line Thickness, Style, and Color FillsThe above image has a couple of issues, like very thin lines and no coloring. All these issues can be fixed easily using functions like Line ThicknessThe Drawing Filled ShapesEvery drawing function also has a filled color version which fills that particular figure with a given color. For example, Using BrushesOne very useful GD function is <?php $img = imagecreatetruecolor($img_width, $img_height); $clouds = imagecreatefrompng('clouds.png'); $clouds = imagescale($clouds, 250); imagesetthickness($img, 5); imagesetbrush($img, $clouds); imageline($img, $img_width*9/10, 50, $img_width*9/10, 50, IMG_COLOR_BRUSHED); ?> I found this cloud image on Pixabay and scaled it down to an appropriate size for our project. The complete code for the hut image is given below. We have simply added two versions of each figure, one to draw the outline and the other to fill in the color. <?php header("Content-type: image/png"); $img_width = 800; $img_height = 600; $img = imagecreatetruecolor($img_width, $img_height); $clouds = imagecreatefrompng('clouds.png'); $clouds = imagescale($clouds, 250); imagesetthickness($img, 5); imagesetbrush($img, $clouds); $black = imagecolorallocate($img, 0, 0, 0); $white = imagecolorallocate($img, 255, 255, 255); $red = imagecolorallocate($img, 255, 0, 0); $green = imagecolorallocate($img, 0, 255, 0); $blue = imagecolorallocate($img, 0, 200, 250); $orange = imagecolorallocate($img, 255, 200, 0); $brown = imagecolorallocate($img, 220, 110, 0); imagefill($img, 0, 0, $white); imagefilledrectangle($img, 0, 0, $img_width, $img_height*8/10, $blue); imagefilledrectangle($img, $img_width*2/10, $img_height*5/10, $img_width*4/10, $img_height*8/10, $red); imagefilledrectangle($img, $img_width*4/10 - 2, $img_height*5/10, $img_width*8/10, $img_height*8/10, $red); imagefilledpolygon($img, [$img_width*3/10, $img_height*2/10, $img_width*2/10, $img_height*5/10, $img_width*4/10, $img_height*5/10], 3, $red); imagefilledpolygon($img, [$img_width*3/10, $img_height*2/10, $img_width*7/10, $img_height*2/10, $img_width*8/10, $img_height*5/10, $img_width*4/10, $img_height*5/10], 4, $red); imagefilledarc($img, 100, 100, 100, 100, 0, 360, $orange, IMG_ARC_PIE); imagefilledarc($img, $img_width*3/10, $img_height*8/10, 100, 200, 180, 360, $brown, IMG_ARC_PIE); imagefilledrectangle($img, 0, $img_height*8/10, $img_width, $img_height, $green); imagerectangle($img, $img_width*2/10, $img_height*5/10, $img_width*4/10, $img_height*8/10, $black); imagerectangle($img, $img_width*4/10 - 2, $img_height*5/10, $img_width*8/10, $img_height*8/10, $black); imagepolygon($img, [$img_width*3/10, $img_height*2/10, $img_width*2/10, $img_height*5/10, $img_width*4/10, $img_height*5/10], 3, $black); imageopenpolygon($img, [$img_width*3/10, $img_height*2/10, $img_width*7/10, $img_height*2/10, $img_width*8/10, $img_height*5/10], 3, $black); imagearc($img, 100, 100, 100, 100, 0, 360, $black); imagearc($img, $img_width*3/10, $img_height*8/10, 100, 200, 180, 360, $black); imageline($img, $img_width*9/10, 50, $img_width*9/10, 50, IMG_COLOR_BRUSHED); imagerectangle($img, -100, $img_height*8/10, $img_width*11/10, $img_height*11/10, $black); imagepng($img); ?> This is the final result of the PHP GD code above. Rendering Text on ImagesPHP GD comes with four different functions to let you render either multiple characters or only one character in a horizontal or vertical direction. These functions are The When it comes to rendering text, the four functions we discussed above are very limited. You will find that even the largest font size value is too small for normal usage. Also, the text can only be written horizontally and vertically. Luckily, GD also has a The following example uses all these functions to create some nice text effects. <?php header("Content-type: image/png"); $img_width = 800; $img_height = 600; $img = imagecreatetruecolor($img_width, $img_height); $black = imagecolorallocate($img, 0, 0, 0); $white = imagecolorallocate($img, 255, 255, 255); $red = imagecolorallocate($img, 255, 0, 0); $green = imagecolorallocate($img, 0, 255, 0); $blue = imagecolorallocate($img, 0, 200, 250); $orange = imagecolorallocate($img, 255, 200, 0); $brown = imagecolorallocate($img, 220, 110, 0); imagefill($img, 0, 0, $white); imagestringup($img, 5, $img_width*19/20, $img_height*19/20, 'This sentence was written using imagestringup()!', $blue); imagestring($img, 5, $img_width/20, $img_height/20, 'This sentence was written using imagestring()!', $red); $passion_one = dirname(__FILE__) . '/PassionOne-Regular.ttf'; imagettftext($img, 32, 0, $img_width/20, $img_height*2/10, $black, $passion_one, 'This is Passion One Font!'); $merriweather = dirname(__FILE__) . '/Merriweather-Regular.ttf'; imagettftext($img, 24, 90, $img_width*9/10, $img_height*19/20, $black, $merriweather, 'This is Merriweather Regular Font!'); $patua_one = dirname(__FILE__) . '/PatuaOne-Regular.ttf'; imagettftext($img, 32, 0, $img_width/20, $img_height*3/10 + 2, $black, $patua_one, 'This is Patua One Font!'); imagettftext($img, 32, 0, $img_width/20, $img_height*3/10, $orange, $patua_one, 'This is Patua One Font!'); $monoton = dirname(__FILE__) . '/Monoton-Regular.ttf'; imagettftext($img, 72, 0, $img_width/20, $img_height*5.5/10 - 5, $brown, $monoton, 'MONOTON'); imagettftext($img, 72, 0, $img_width/20, $img_height*5.5/10 + 5, $orange, $monoton, 'MONOTON'); imagettftext($img, 72, 0, $img_width/20, $img_height*5.5/10, $blue, $monoton, 'MONOTON'); $kaushan = dirname(__FILE__) . '/KaushanScript-Regular.ttf'; imagettftext($img, 84, 0, $img_width/20, $img_height*8/10 - 2, $brown, $kaushan, 'Good Night!'); imagettftext($img, 84, 0, $img_width/20, $img_height*8/10 + 2, $black, $kaushan, 'Good Night!'); imagettftext($img, 84, 0, $img_width/20 - 2, $img_height*8/10, $brown, $kaushan, 'Good Night!'); imagettftext($img, 84, 0, $img_width/20 + 2, $img_height*8/10, $black, $kaushan, 'Good Night!'); imagettftext($img, 84, 0, $img_width/20, $img_height*8/10, $white, $kaushan, 'Good Night!'); imagepng($img); ?> As you can see, we have rendered the same text with the same font in slightly different positions to create some effects like basic text shadows. The important thing to keep in mind is that the text rendered by any text function will completely hide the text below it in case of overlap. Here is the final image obtained after running the above code. Creating Simple Designs and PostersLet's use all the knowledge that we have gained so far to create simple posters or images with a mix of text and shapes. I will try to recreate something similar to the image in this PHP image manipulation tutorial where we did color replacement. We will be drawing concentric circles to keep our calculations simple. One new function that we will be using in this section is called <?php $img_width = 850; $img_height = 480; $img = imagecreatetruecolor($img_width, $img_height); $blue = imagecolorallocate($img, 100, 150, 255); $white = imagecolorallocate($img, 255, 255, 255); imagefill($img, 0, 0, $blue); $comforter = dirname(__FILE__) . '/Comforter-Regular.ttf'; $text_size = 20; $text_angle = 0; $poster_font = $comforter; $poster_text = 'Monty'; do { $text_size += 4; $font_box = imagettfbbox($text_size, $text_angle, $poster_font, $poster_text); $font_box_width = $font_box[2] - $font_box[0]; $font_box_height = $font_box[3] - $font_box[5]; } while($font_box_width < $img_width*0.7 && $font_box_height < $img_height*0.7); imagettftext($img, $text_size, $text_angle, $img_width*0.15, $img_height - $font_box_height/2, $white, $poster_font, $poster_text); imagepng($img, 'poster.png'); ?> We start with a base font size of 20 points and then keep increasing it by 4 as long as both the width and height are within the defined limit. Once we reach the appropriate font size, we exit the loop and render the text on the image using Now we can include the following code before the last line where we save the image to add our filled concentric circles to the bottom-left and top-right corners of the image. <?php $edge_distance = 20; $largest_size = 200; $size_drop = 10; $central_point = $largest_size/2 + $edge_distance; for($i = 0; $i <= 19; $i++) { $ellipse_size = $largest_size - $size_drop*$i; $ellipse_color = $white; if($i%2 != 0){ $ellipse_color = $blue; } imagefilledellipse($img, $central_point, $img_height, $ellipse_size, $ellipse_size, $ellipse_color); imagefilledellipse($img, $img_width - $central_point, 0, $ellipse_size, $ellipse_size, $ellipse_color); } ?> As you can see, it is possible to create interesting patterns with ease using a little mathematics and some built-in PHP GD functions. Final ThoughtsThe aim of this tutorial was to get you acquainted with different GD functions to draw basic shapes from scratch in PHP. With the help of a little maths, you will be able to use these functions to create more complicated shapes like regular polygons, rounded rectangles, etc. PHP GD also has a couple of very useful functions for rendering text on an image. The use of a nice font will make sure that the rendered text does not look weird when placed on regular images loaded from different file paths. Did you create any more fancy text effects in PHP? Please share them with us on the forum. Did you find this post useful? Freelancer, Instructor I am a full-stack developer who also loves to write tutorials. After trying out a bunch of things till second year of college, I decided to work on my web development skills. Starting with just HTML and CSS, I kept moving forward and gained experience in PHP, JavaScript and Python. I usually spend my free time either working on some side projects or traveling around. How can I add image in PHP?PHP File Upload. Configure The "php.ini" File. First, ensure that PHP is configured to allow file uploads. ... . Check if File Already Exists. Now we can add some restrictions. ... . Limit File Size. The file input field in our HTML form above is named "fileToUpload". ... . Limit File Type. ... . Complete Upload File PHP Script.. Which functions are used to draw patterned lines in PHP?The imagedashedline() function is an inbuilt function in PHP which is used to draw a dashed line.. PHP | imagefilledpolygon() Function.. PHP | imageellipse() Function.. PHP | imagefilledellipse() Function.. How do I scale an image in PHP?The imagescale() function is an inbuilt function in PHP which is used to scale an image using the given new width and height. Parameters: This function accepts four parameters as mentioned above and described below: $image: It is returned by one of the image creation functions, such as imagecreatetruecolor().
How can I download image from PHP?You can force images or other kind of files to download directly to the user's hard drive using the PHP readfile() function. Here we're going to create a simple image gallery that allows users to download the image files from the browser with a single mouse click. Let's create a file named "image-gallery.
|