Module 13 - Working With Images

S13 - Playing With Image Manipulation

Sandbox Challenge: Using GD to Manipulate Images in PHP

Welcome to Image Manipulation in PHP!

PHP’s GD Library allows us to create, modify, and manipulate images dynamically. In this challenge, we will explore how to create images, draw shapes, add text, and apply effects using GD.

For this activity, you will be using PHPStorm and your local MAMP web server to test your code. Make sure MAMP is running and your project is configured correctly in PHPStorm.

Before you begin:

Ensure that the GD extension is enabled in MAMP. You can check this by creating a file (phpinfo.php) and running:

<?php
phpinfo();
?>

Search for “GD” in the output. If GD is not enabled, go to MAMP Settings > PHP and enable it.

Part 1: Creating a Basic Image with GD

Let’s start by creating a blank image and displaying it in the browser.

Create a file called create_image.php:

<?php
// Create a blank image (width: 400px, height: 200px)
$image = imagecreatetruecolor(400, 200);

// Allocate colors
$backgroundColor = imagecolorallocate($image, 255, 255, 255); // White
$textColor = imagecolorallocate($image, 0, 0, 0); // Black

// Fill the background
imagefilledrectangle($image, 0, 0, 400, 200, $backgroundColor);

// Output the image to the browser
header("Content-Type: image/png");
imagepng($image);

// Free up memory
imagedestroy($image);
?>

Run create_image.php in your browser to see a blank image.

Modify the script to change the background color.

Part 2: Drawing Shapes on an Image

Now, let’s draw a rectangle, a circle, and a line. Modify create_image.php or create a new file:

<?php
$image = imagecreatetruecolor(400, 200);

$backgroundColor = imagecolorallocate($image, 255, 255, 255);
$rectangleColor = imagecolorallocate($image, 0, 0, 255); // Blue
$circleColor = imagecolorallocate($image, 255, 0, 0); // Red
$lineColor = imagecolorallocate($image, 0, 255, 0); // Green

imagefilledrectangle($image, 50, 50, 150, 150, $rectangleColor);
imagefilledellipse($image, 250, 100, 80, 80, $circleColor);
imageline($image, 10, 10, 390, 190, $lineColor);

header("Content-Type: image/png");
imagepng($image);
imagedestroy($image);
?>

Run this script and see the shapes appear.

Modify the positions and colors of the shapes.

Part 3: Adding Text to an Image

We can add text to an image using imagestring(). Modify your script:

<?php
$image = imagecreatetruecolor(400, 200);
$backgroundColor = imagecolorallocate($image, 255, 255, 255);
$textColor = imagecolorallocate($image, 0, 0, 0);

imagefilledrectangle($image, 0, 0, 400, 200, $backgroundColor);
imagestring($image, 5, 150, 90, "Hello, PHP GD!", $textColor);

header("Content-Type: image/png");
imagepng($image);
imagedestroy($image);
?>

Modify the script to change the font size and position of the text.

Try using imagettftext() to use a custom font (Hint: You need a TTF font file in your project).

Part 4: Loading and Modifying an Existing Image

GD allows us to open and modify existing images. Try this:

<?php
$image = imagecreatefromjpeg("example.jpg"); // Use an actual image in your project
$textColor = imagecolorallocate($image, 255, 255, 255);
imagestring($image, 5, 10, 10, "Watermark Text", $textColor);

header("Content-Type: image/jpeg");
imagejpeg($image);
imagedestroy($image);
?>

Use an actual JPEG image in your project directory (example.jpg).

Modify the script to overlay a watermark at different positions.

Great job! You’ve just explored how to create, draw, add text, and modify images using PHP’s GD library. Keep experimenting and try creating your own image effects! 

A13 - Image Filtering App

The Challenge

For this assignment, you will be creating three separate files that all work together to allow a user to upload an image, and then perform one of several different operations on that image, and then finally see and download the finished product.  Below, I have provided three page templates for you that will help you get started on this assignment.  As always I highly encourage you to customize them, and to challenge yourself by making them your own.

Here is how the three pages will work together to satisfy the assignment:

Constraints:

• Your solution should not require more than 3 pages/scripts.
• Your solution should perform the following things:
  • Allow the user to upload an image file.
  • Allow the user to choose which filter/action to perform on that file.
  • Display the file with the filter/action completed.

Resources

Download   a13_form.php

Download   a13_page1.php

Download   a13_page2.php

A13 Explainer Video

https://youtu.be/h8GHUz0YK9k

Submission Type

Please submit a screenshot of a13_page1.php and the full a13_page2.php file.