Image Uploads and Scripted Manipulation
Learn to operate at a professional level with Perl & MySQL |
 By Thomas Valentine
Viewed 12345 Times
Posted Sept. 18, 2024 |
|
It is entirely possible to edit or otherwise manipulate images that you upload to your server, automatically. In this article we’ll discuss not just image uploading, but also image manipulation via scripted action.
To start we must lay the ground work, starting with some simple HTML markup. The HTML code to allow a FORM control to upload an image is simple but very important in its constituent parts. The HTML markup that we’ll use for this section’s discussion is given below:
<table border=”0” align=”center”>
<tr>
<form name="form1" method="post" action="upload.pl" enctype="multipart/form-data">
<td align="center" valign="top">1. <input type="file" name="FILE0"></input></td>
</tr><tr>
<td align="center" valign="top"> 2.<input type="file" name="FILE1"></input></td>
</tr><tr>
<td align="center" valign="top"> 3. <input type="file" name="FILE2"></input></td>
</tr><tr>
<td align="center" valign="top" input type="submit" value="Upload Image(s)"></td>
</form>
</tr>
</table>
As you can see, there are three file fields being displayed. Each one has a name attribute that is unique and is listed in a logical order. The input type of “file” tells the browser to expect a file upload of some kind. The enctype="multipart/form-data” is essential to the success of the upload and cannot be left out. The name of the file and then the data (the file’s contents) are sent to the server in two completely separate parts. Because of this it is said to be a multi-part form.
The simple HTML I used for the example really is all it takes to make an aesthetically pleasing page element. Now let’s get into the upload script itself. As with all Perl scripts, the script starts on its first line, an area called the shebang. Linux servers are the norm on the web, so the path to find Perl.exe is usually “#!/usr/bin/perl.
The path may be anything, really, but it’s always good to stay with normal conventions and protocols when describing the path to an object. On a Windows computer, the shebang is usually C:\Progra~@\Perl\bin\perl.
The first chunk of Perl script to be addressed is as shown below:
$thisfilename0 = $cgi->param('FILE0');
$thisfilename1 = $cgi->param('FILE1');
$thisfilename2 = $cgi->param('FILE2');
$thisfile0 = $cgi->upload('FILE0');
$thisfile1 = $cgi->upload('FILE1');
$thisfile2 = $cgi->upload('FILE2');
As always, there are considerations that much be addressed while designing your scripts. I’ve found that processing the parameters and script’s data at the top of the script worked the best, as Perl reads and executes from the top down. I have also found that keeping the script as simple as possible is always the best way to go. You can see that the variables are all uniquely identified.
The very first mistake a developer will make when starting to write their first uploader is to only use a param() method to catch the data or only an upload() method to catch the data. The fact is, you have to use both methods, as you can see in the above block of code. Use the param() method to handle the file name. The data within the file is transported using the upload() method.
This is where it gets interesting. We’re working with files and Perl modules in this section, so let’s start with why I started a file manipulation with the use of a length() method. The reason I weigh the variable is to check if an HTML input field was left empty. There are 3 file locations to upload with. I simply weigh the variable to see if the input field was left empty. If it’s empty, @thumb and @thesefiles will not have data pushed onto them. This has connotations for the following code:
$thisLength0 = length($thisfilename0);
if ($thisLength0 > 0) {
open(FILE0, ">/$dirPath/$thisfilename0;
while(<$thisfile0>) {
print FILE0;
};
close FILE0;
push @thumb, "tn_" . $thisfilename0;
push @thesefiles, $thisfilename0;
copy ("/$dirPath/$thisfilename0", "/$dirPath/tn_$thisfilename0");
};
After weighing $thisfilename0, a simple if statement decides if the file is to be created and stored and named. Next comes a while() statement, which is used to read the data in $thisfile0. The print FILE0 statement then writes the data to the file, the name of which is in $thisfilename0. The data stream is then closed.
In order to refer to the proper variable names that hold your data, in particular the file names, I pushed the file name and the thumbnail name onto arrays, @thumb and @thesefiles. A simple concatenation of the original file name indicates that a thumbnail of the uploaded file will be created and called a thumbnail, the name of which starts with “tn_”.
$count = "0";
foreach (@thesefiles) {
# Get the size of the uploaded file
($globe_x, $globe_y) = imgsize("/$dirPath/$thesefiles[$count]");
### find out if to resize at all. this is for the resize of the original image
if (($globe_x or $globe_y) > 640) {
### fix x and y divide by zero potential with an if statement
if ($globe_x <= 0) {
$globe_x = "1";
};
if ($globe_y <= 0) {
$globe_y = "1";
};
### resize the width to a maximum of 640, proportionally, if required
$ratio = $globe_y / $globe_x;
if ($globe_y > 640) {
$globe_y = "640";
$globe_x = $globe_y / $ratio;
}
$newwidth1 = int($globe_y);
### resize the height to a maximum of 1500, proportionally, if required
$ratio = $globe_y / $globe_x;
if ($globe_x >= 1500) {
$globe_x = "1500";
$globe_y = $globe_x / $ratio;
}
$newheight1 = int($globe_x);
$image = Image::Magick->new();
$image->Read("/$dirPath/$thesefiles[$count]");
$image->Resize(geometry => "$newheight1x$newwidth1");
$image->Write("/$dirPath/$thesefiles[$count]");
}
Next comes the decision on when to resize the image. The first piece of information we’ll need to generate is a ratio of $globe_x and $globe_y, which is stated as “$ratio = $globe_y / $globe_x”. The size is then tested with an if statement, which, if higher than 640, globe_y becomes 640 and $globe_x becomes the result of the division of $globe_y / $ratio. $newwidth1 becomes the integer value of $globe_x, which is the final value before actually resizing, should the limit of 640 pixels wide be exceeded.
The same set of code that decided if the image was to be resized by exceeding the width is used to calculate the maximum height. Images with a height exceeding 1500 pixels are resized.
Now is when we’ll do the actual image manipulation. We’ll called on Image::Magick by creating a new Image::Magick object. We will then perform three operations: Read(), Resize() and Write(), each on their own line.
We start with a $count = “0” declaration. The $count, which is zero based, is fed to a foreach statement. Every time the foreach loop iterates a 100 X 100 pixel thumbnail is generated, preserving proportions, as follows:
### Begin processing the @thumbs
$count = "0";
foreach (@thumb) {
### Begin processing the $thumb, resizing to 100 square
# Get the size of the uploaded file
($globe_x, $globe_y) = imgsize("/home/public_html/content/$thumb[$count]");
### find out if to resize at all. this is for the resize of the orginial image
### big if statement starts here
if (($globe_x or $globe_y) > 100) {
### fix x and y divide by zero potential with an if statement each
if ($globe_x <= 0) {
$globe_x = "1";
};
if ($globe_y <= 0) {
$globe_y = "1";
};
### resize the width to a maximum of 100, proportionally, if required
$ratio = $globe_y / $globe_x;
if ($globe_y > 100) {
$globe_y = "100";
$globe_x = $globe_y / $ratio;
}
$newwidth2 = int($globe_y);
### resize the height to a maximum of 100, proportionally, if required
$ratio = $globe_y / $globe_x;
if ($globe_x > 100) {
$globe_x = "100";
$globe_y = $globe_x / $ratio;
}
$newheight2 = int($globe_x);
$image = Image::Magick->new();
$image->Read("/home/public_html/content/$thumb[$count]");
$image->Resize(geometry => "$newheight2 x $newwidth2");
$image->Write("/home/public_html/content/$thumb[$count]");
++$count;
};
You can now see how images can be resized via scripted action. Do try to play around with it.
So we’re done with manipulating images. Next comes the generation of the HTML markup that will display your uploaded, thumbed images in the browser. Examine the following block of code:
### Begin processing the 3 images uploaded
$count = "0";
$filesuploaded = @thumb;
foreach (@thumb) {
$onecontentelement = qq{<td align="center" valign="middle" width="100" height="100"><img src="https://www.domain.com/content/$thumb[$count]"></td>};
push @contentarray, $onecontentelement;
++$count;
};
We first declare $count = “0”. We will use this number, incremented after every iteration of the foreach loop, to load values into @contentarray. We build the HTML one step at a time, adding HTML code every time the foreach statement iterates. $onecontentelement contains a TD element, the value of which changes as $count is incremented on the last line of the foreach statement.
You may think that after generating the HTML markup for each thumb we’re done with that, but now we have to lay out some rules as to what markup will be encapsulating your generated code. In the following section we run into some scripting concerns that we have to discuss.
Because Perl is an inline language, the execution starts from the top and goes down. When writing the HTML for your page, you at first have to realize where in the complete document your generated content will be. Peruse the following:
$topofcontent = qq{HTML>
<HEAD>
<TITLE>EasyUploader.pl</TITLE>
</HEAD>
<BODY>
<table border="0" cellpadding="0" cellspacing="0" align="center" valign="top">
<tr>
<td height="10"></td>
</tr><tr>
<td align="center" valign="middle"> Upload Successful!</td>
</tr><tr>
<td height="10"></td>
</tr><tr>
<td align="center" valign="middle">$filesuploaded Files Uploaded</td>
</tr><tr>
<td height="10"></td>
</tr><tr>
<td align="center" valign="middle">Showing $filesuploaded Thumbs</td>
</tr>};
$bottomofcontent = qq{<tr>
<td height="10"></td>
</tr>
</table>
</BODY>
</HTML>};
### print da page
print qq{Content-type: text/html\n\n};
print qq{$topofcontent @contentarray $bottomofcontent};
Alright, so we’ve discussed an upload script, but we’re not entirely completed. You must give thought to how you’re going to get the script to print your formatted HTML markup to the browser. As you can see in the above block of code, there are two print commands. The first is used to tell the browser what type of data to expect, in this case “text/html”.
Then comes another print command, this time stating that $topofcontent @content and $bottomofcontent be printed, in that order. If you look you’ll see that the top of a table is in $topofcontent and the bottom of a table is in $bottomofcontent.
We put @content in the middle because the HTML will be sent in exactly that order: the content generated on the fly and stuffed into @content is printed in the right order, in this case showing up to three image thumbnails.
So that’s image uploads and scripted manipulation in a nutshell. I hope you found it useful. Until next time. |
|
|
|
|
| I do not employ cookies or tracking devices of any kind |
|
|
