Upload file, edit, then send back to user

JamesBrauman

Hello I am trying to build a simple image edit script in PHP. What I want this script to do is:

Upload file to temp directory, retrieve the path to the temp file, retrieve variables 'title' and 'subtitle'.
Perform some error checking to make sure nothing funny is going on.
Create a NEW black image which is 1.5 the size of the temporary image.
COPY the temporary image into the center of the new black image, retaining original size
Output this file as a jpeg directly to the browser.

This is the code that I have.

SIMPLE HTML UPLOAD TEST FORM

<html>
<head></head>
<body>
<form method="post" action="gen_funny_pic.php">
<input type="file" name="uploadedpicture"><BR>
<input type="text" name="title"><BR>
<input type="text" name="subtitle"><BR>
<input type="submit" value="submit">
</form>
</body>
</html>

CODE FOR GENERATING IMAGE AND OUTPUTTING AS JPEG
<?php
	//Filename: Gen_funny_pic.php
	//Description: Lets the user generate a custom funny picture by allowing them to upload thier pic, and
	//add a title and subtitle.

//Define some variables
$file_id = $_FILES['uploadedpicture']['tmp_name'];
$file_size = $_FILES['uploadedpicture']['size'] / 1024;
$file_error_code = $_FILES['uploadedpicture']['error'];
$string_title = $_REQUEST['title'];
$string_subtitle = $_REQUEST['subtitle'];
$max_title_size = 20; //In chars
$max_subtitle_size = 20; //In chars
$max_file_size = 1024; //In KB - 1024kb = 1mb
$new_image_scale = 1.5;

//Check for errors.
if ($string_title == "" || $string_subtitle == "")
	exit("Error: Title or Subtitle don't exist!");
if ($string_title > $max_title_size)
	exit("Error: Title is too long!");
if ($string_subtitle > $max_subtitle_size)
	exit("Error: Subtitle is too long!");
if ($file_id == "")
	exit("Error: Error uploading file!");
if ($file_size > $max_file_size)
	exit("Error: File too large!");
if ($file_error_code > 0)
	exit("Error: Error uploading file!");

//Start creating our image.
$old_image = open_image($file_id);
if ($old_image == false)
	exit("Error: Error processing file!");
$old_height = imagesy($old_image);
$old_width = imagesx($old_image);
$new_height = $old_height * $new_image_scale;
$new_width = $old_width * $new_image_scale;
$new_image_top_left_x = ($new_width / 2) - ($old_width / 2);
$new_image_top_left_y = ($new_height / 2) - ($old_height / 2);

$new_image = imagecreatetruecolor($new_width, $new_height);
$black = imagecolorallocate($new_image, 0, 0, 0);
imagefilltoborder($new_image, 0, 0, $black, $black);
imagecopyresampled($new_image, $old_image, $new_image_top_left_x, $new_image_top_left_y, 0, 0, $old_width, $old_height, $old_width, $old_height);

//Display image.
header("Content-type: image/jpeg");
imagejpeg($new_image);
imagedestroy($new_image);
?>

At the moment I am receiving the error "Error: Error uploading file!" which means there is a problem with either of these lines:

	if ($file_id == "")

if ($file_error_code > 0)

Basically, I don't really know what I am doing, and I am looking for some help (once I can do this I will be able to figure out the other GD functions)

Also could you please suggest improvements as to how to improve the script.

Thankyou. 😉

bpat1434

Here's a little something I whipped up to do exactly what you want. I tested it on a 640x480 image, and it works.

<?php

if(empty($_POST))
{
	showForm();
	exit;
}

$allowedTypes = array(
	IMAGETYPE_GIF,
	IMAGETYPE_JPEG,
	IMAGETYPE_PNG,
	IMAGETYPE_BMP
);

$tmp_image = $_FILES['userImage']['tmp_name'];
$file_size = $_FILES['userImage']['size']/1024;
$error = $_FILES['userImage']['error'];

$imageTitle = $_POST['imageTitle'];
$imageSubtitle = $_POST['imageSubtitle'];

$maxTitleSize = 20;
$maxSubtitleSize = 20;
$maxFileSize = 1024;

$newImageScale = 1.5;
$errors = array();

if(empty($imageTitle) || empty($imageSubtitle))
	$errors[] = 'Error: Title or Subtitle not found!  One or both were empty, they are both required.';

if(strlen($imageTitle) > $maxTitleSize)
	$errors[] = 'Error: Image title too long!  It must be ' . $maxTitleSize . ' characters or less.';

if(strlen($imageSubtitle) > $maxSubtitleSize)
	$errors[] = 'Error: Image subtitle too long!  It must be ' . $maxSubtitleSize . ' characters or less.';
if(!is_uploaded_file($tmp_image) || $error > 0)
	$errors[] = 'Error: Error uploading file (<em>' . $error . '</em>)!';
if($file_size > $maxFileSize)
	$errors[] = 'Error: File too large!  Image file must be 1 Mb or less.';

$info = getimagesize($tmp_image);

if(empty($info) || !in_array($info[2], $allowedTypes))
	$errors[] = 'Error: The file you uploaded doesn\'t seem to be a valid image.  Couldn\'t calculate the image size.';

if(!empty($errors))
{
	echo '
	<div style="background:#ff8080;border:2px solid #900;float:left;position:relative;">
		<div style="float:left;margin:5px;padding:0;position:relative;">
			<h4 style="border-bottom:2px dashed #900;margin:0 0 5px 0;padding:0;">Errors Occurred</h4>
			<p>Some errors were encountered while processing the data.  They are listed below:</p>
			<ul>
				<li>' . implode('</li>
				<li>', $errors) . '</li>
			</ul>
		</div>
	</div>';
	showForm();
}

$imagecreatefrom = 'imagecreatefrom' . substr(image_type_to_extension($info[2]), 1);
$o_img = $imagecreatefrom($tmp_image);

$o_width  = $info[0];
$o_height = $info[1];

$n_width  = $o_width * $newImageScale;
$n_height = $o_height * $newImageScale;

$n_tl_x = ($n_width - $o_width) / 2;
$n_tl_y = ($n_height - $o_height) / 2;

$img = imagecreatetruecolor($n_width, $n_height);
$black = imagecolorallocate($img, 0, 0, 0);
//imagefilltoborder($img, 0, 0, $black, $black);
imagecopyresampled($img, $o_img, $n_tl_x, $n_tl_y, 0, 0, $o_width, $o_height, $o_width, $o_height);

header('Content-Type: ' . image_type_to_mime_type($info[2]));

$image = 'image' . substr(image_type_to_extension($info[2]), 1);
$image($img);

function showForm()
{
	echo '
	<form action="' . $_SERVER['PHP_SELF'] . '" method="post" enctype="multipart/form-data">
		<table>
			<tr>
				<td>
					<label for="imagetitle">Image Title:</label>
				</td>
				<td>
					<input type="text" name="imageTitle" id="imagetitle" size="50" value="' . (empty($_POST['imageTitle']) ? '' : $_POST['imageTitle']) . '" />
				</td>
			</tr>
			<tr>
				<td>
					<label for="imagesubtitle">Image Subtitle:</label>
				</td>
				<td>
					<input type="text" name="imageSubtitle" id="imagesubtitle" size="50" value="' . (empty($_POST['imageSubtitle']) ? '' : $_POST['imageSubtitle']) . '" />
				</td>
			</tr>
			<tr>
				<td>
					<label for="imagepath">Upload Image:</label>
				</td>
				<td>
					<input type="file" name="userImage" id="imagepath" size="50" />
				</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>
					<input type="submit" name="submit" value="Upload" style="position:relative;float:right;" />
				</td>
			</tr>
		</table>
	</form>';
}

Hope that helps. I changed a few things, but ultimately kept your main coding. I changed how you check for errors, and added in a check for the image type. It also outputs the same type of image that the original was.

JamesBrauman

thanks!