Bellow is an image before and after resizing:
Before
24.80KB
24.80KB
After
3.52KB
So let`s begin downsizing those images...3.52KB
The upload form
upload-form.php:
<form action="upload.php" method="POST" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="100000" />
Select image: <input name="theimage" type="file" /><br />
<input type="submit" value="Upload image" />
</form>
enctype="multipart/form-data" - this line tells the server that you want to send a file<input type="hidden" name="MAX_FILE_SIZE" value="100000" />
Select image: <input name="theimage" type="file" /><br />
<input type="submit" value="Upload image" />
</form>
MAX_FILE_SIZE - limits the maximum file size in bytes
type="file" - this is the file selecting input
Checking the image
First we need to check the file for 3 different problems:
- it was submitted or not ?
- it was uploaded ?
- it is too big ?
upload.php:
<?php
if(isset($_FILES['theimage'])){
if($_FILES['theimage']['size'] < 1){
echo 'Upload error!';
}
else if($_FILES['theimage']['size'] > 100000){
echo 'The image is too big!';
}
}
else {
echo 'There is no image!';
}
?>
Check image typeif(isset($_FILES['theimage'])){
if($_FILES['theimage']['size'] < 1){
echo 'Upload error!';
}
else if($_FILES['theimage']['size'] > 100000){
echo 'The image is too big!';
}
}
else {
echo 'There is no image!';
}
?>
Now we will check the type of the file, because we will accept only .jpg .gif and .png. At this step we will use some GD, too, because we will put our image in a variable:
<?php
if(isset($_FILES['theimage'])){
if($_FILES['theimage']['size'] < 1){
echo 'Upload error!';
}
else if($_FILES['theimage']['size'] > 100000){
echo 'The image is too big!';
}
else {
switch($_FILES['theimage']['type']){
case 'image/gif':
$image = imagecreatefromgif($_FILES['theimage']['tmp_name']);
break;
case 'image/jpeg':
case 'image/pjpeg':
$image = imagecreatefromjpeg($_FILES['theimage']['tmp_name']);
break;
case 'image/png':
$image = imagecreatefrompng($_FILES['theimage']['tmp_name']);
break;
}
if(!isset($image)){
echo 'Only .gif, .jpg or .png images are allowed!';
}
}
}
else {
echo 'There is no image!';
}
?>
Working with transparent imagesif(isset($_FILES['theimage'])){
if($_FILES['theimage']['size'] < 1){
echo 'Upload error!';
}
else if($_FILES['theimage']['size'] > 100000){
echo 'The image is too big!';
}
else {
switch($_FILES['theimage']['type']){
case 'image/gif':
$image = imagecreatefromgif($_FILES['theimage']['tmp_name']);
break;
case 'image/jpeg':
case 'image/pjpeg':
$image = imagecreatefromjpeg($_FILES['theimage']['tmp_name']);
break;
case 'image/png':
$image = imagecreatefrompng($_FILES['theimage']['tmp_name']);
break;
}
if(!isset($image)){
echo 'Only .gif, .jpg or .png images are allowed!';
}
}
}
else {
echo 'There is no image!';
}
?>
We will downsize the images by converting it to .jpg. The jpg images can not be transparent and when the user uploads a transparent image, the transparent part will be painted in black. To make the transparent part white we need to create a white image with the same size as our uploaded image and then copy the uploaded image over the white image:
<?php
if(isset($_FILES['theimage'])){
if($_FILES['theimage']['size'] < 1){
echo 'Upload error!';
}
else if($_FILES['theimage']['size'] > 100000){
echo 'The image is too big!';
}
else {
switch($_FILES['theimage']['type']){
case 'image/gif':
$image = imagecreatefromgif($_FILES['theimage']['tmp_name']);
break;
case 'image/jpeg':
case 'image/pjpeg':
$image = imagecreatefromjpeg($_FILES['theimage']['tmp_name']);
break;
case 'image/png':
$image = imagecreatefrompng($_FILES['theimage']['tmp_name']);
break;
}
if(!isset($image)){
echo 'Only .gif, .jpg or .png images are allowed!';
}
else {
$size = getimagesize($_FILES['theimage']['tmp_name']);
$background = imagecreatetruecolor($size[0],$size[1]);
$white = imagecolorallocate($background,255,255,255);
imagefill($background,0,0,$white);
imagecopy($background,$image,0,0,0,0,$size[0],$size[1]);
}
}
}
else {
echo 'There is no image!';
}
?>
Downsize the imageif(isset($_FILES['theimage'])){
if($_FILES['theimage']['size'] < 1){
echo 'Upload error!';
}
else if($_FILES['theimage']['size'] > 100000){
echo 'The image is too big!';
}
else {
switch($_FILES['theimage']['type']){
case 'image/gif':
$image = imagecreatefromgif($_FILES['theimage']['tmp_name']);
break;
case 'image/jpeg':
case 'image/pjpeg':
$image = imagecreatefromjpeg($_FILES['theimage']['tmp_name']);
break;
case 'image/png':
$image = imagecreatefrompng($_FILES['theimage']['tmp_name']);
break;
}
if(!isset($image)){
echo 'Only .gif, .jpg or .png images are allowed!';
}
else {
$size = getimagesize($_FILES['theimage']['tmp_name']);
$background = imagecreatetruecolor($size[0],$size[1]);
$white = imagecolorallocate($background,255,255,255);
imagefill($background,0,0,$white);
imagecopy($background,$image,0,0,0,0,$size[0],$size[1]);
}
}
}
else {
echo 'There is no image!';
}
?>
This is the final step, when we save the image in .jpg format:
<?php
if(isset($_FILES['theimage'])){
if($_FILES['theimage']['size'] < 1){
echo 'Upload error!';
}
else if($_FILES['theimage']['size'] > 100000){
echo 'The image is too big!';
}
else {
switch($_FILES['theimage']['type']){
case 'image/gif':
$image = imagecreatefromgif($_FILES['theimage']['tmp_name']);
break;
case 'image/jpeg':
case 'image/pjpeg':
$image = imagecreatefromjpeg($_FILES['theimage']['tmp_name']);
break;
case 'image/png':
$image = imagecreatefrompng($_FILES['theimage']['tmp_name']);
break;
}
if(!isset($image)){
echo 'Only .gif, .jpg or .png images are allowed!';
}
else {
$size = getimagesize($_FILES['theimage']['tmp_name']);
$background = imagecreatetruecolor($size[0],$size[1]);
$white = imagecolorallocate($background,255,255,255);
imagefill($background,0,0,$white);
imagecopy($background,$image,0,0,0,0,$size[0],$size[1]);
$image = $background;
$filename = explode(".",$_FILES['theimage']['name']);
$filename = $filename[0];
imagejpeg($image,$_SERVER['DOCUMENT_ROOT'] . '/thumbnails/' . $filename . '.jpg',90);
imagedestroy($image);
echo 'Your image: <img src="/thumbnails/' . $filename . '.jpg" />';
}
}
}
else {
echo 'There is no image!';
}
?>
If you have any questions please don`t hesitate to ASK!if(isset($_FILES['theimage'])){
if($_FILES['theimage']['size'] < 1){
echo 'Upload error!';
}
else if($_FILES['theimage']['size'] > 100000){
echo 'The image is too big!';
}
else {
switch($_FILES['theimage']['type']){
case 'image/gif':
$image = imagecreatefromgif($_FILES['theimage']['tmp_name']);
break;
case 'image/jpeg':
case 'image/pjpeg':
$image = imagecreatefromjpeg($_FILES['theimage']['tmp_name']);
break;
case 'image/png':
$image = imagecreatefrompng($_FILES['theimage']['tmp_name']);
break;
}
if(!isset($image)){
echo 'Only .gif, .jpg or .png images are allowed!';
}
else {
$size = getimagesize($_FILES['theimage']['tmp_name']);
$background = imagecreatetruecolor($size[0],$size[1]);
$white = imagecolorallocate($background,255,255,255);
imagefill($background,0,0,$white);
imagecopy($background,$image,0,0,0,0,$size[0],$size[1]);
$image = $background;
$filename = explode(".",$_FILES['theimage']['name']);
$filename = $filename[0];
imagejpeg($image,$_SERVER['DOCUMENT_ROOT'] . '/thumbnails/' . $filename . '.jpg',90);
imagedestroy($image);
echo 'Your image: <img src="/thumbnails/' . $filename . '.jpg" />';
}
}
}
else {
echo 'There is no image!';
}
?>
HTML Code
Direct Link
9 comments:
Where are the uploaded images being stored?
in the /thumbnails/ folder
Can you use this to also store the images after upload into a database? It would be neat if each person in chat ( http://www.codingmix.com/2010/12/private-chat-room-script.html and http://www.codingmix.com/2010/11/cross-browser-chat-script-using-php.html ) could upload an avatar... What do you think?
Wow That is a good technique as far as images are concerned.
This is way too much, when could simply downsize the image to around 1 - 5KB. Not even the small images (around 100x100) can reach 50 - 100KB.
It is basic thing that we have to need resize the images for printing and e-mail recipients will have to open an image-editing. Downsize is a utility that allows to prepare images for the web, email, or presentations by resizing, adding watermarks, frames, and drop shadows without changing its quality.
thanks so much
The display of image on the page for previewing just have to check the type of image before uploading. If it isn't in the correct format then have to write a code to change their format according the web page.
I am new to php but not new to object oriented programming. Over the years , I had though og moving from desk side application development to the web; now the in-thing is cloud computing and it is wise for anyone to get speed on php and mysql and other cloud based computing development tools at this time. This tutorial meet and exceeds my needs. I am also teaching newbies around me to keep my skills sharp.
Wole Opeoluwa; writes from Lagos, Nigeria(West Africa)
Post a Comment