Solved

PHP - AJAX Photo Uploader

Posted on 2012-12-26
7
402 Views
Last Modified: 2012-12-27
Good Afternoon,

I have spent some time browsing the search results looking for an answer to my question and I haven't quite found what I am looking for.

I am looking for an open-source photo-uploader with resize capability.

Here is some background information:
The website I am currently constructing allows people to register for a contest.
The website currently tracks personal information, measurements, and subsequent
updates.
Each registrant is given a random ID code that I would like the photo tied to.

I would like the photo re-size to happen locally before upload, but allow for it to be done server side if for whatever reason the browser does not support local re-sizing.


I have decent experience with PHP and classes, but I have never had a reason to upload photos and re-size them before.  So I would greatly appreciate some direction or examples I can use to create my own code or use someone else.

Thanks!
0
Comment
Question by:shdwmage
7 Comments
 
LVL 9

Expert Comment

by:sognoct
ID: 38722224
my favorite script for resizing pics is :

TimThumb – PHP Image Resizer

for the uploading php has native good libraries. w3 school provide useful tips for building a correct and secure php upload form :

w3school php upload file

just have to mix the two things and adjust according to your needs.
0
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 38722656
The upload-image part of this is one thing; the resize-image is a separate thing.  jQuery may have some image-crop tools, but the resize is probably best done on the server after the image is in your control.  Can you please show us what you've tried so far and where you've had troubles?
0
 
LVL 15

Expert Comment

by:Insoftservice
ID: 38723282
agree with @ray

please refere the link it contains cropping of your images .

http://trentrichardson.com/2009/10/25/uberuploadcropper-jquery-upload-and-crop-plugin/
0
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 
LVL 2

Author Comment

by:shdwmage
ID: 38723844
Ray,

I have been looking at a couple of different pre-packed code sets.
The one that I really thought I could get working on the server side is not working. It kicks out multiple errors and I don't know enough about the PHP resize functionality to see what it is.

Ajax Multiple Image Upload-Resize with jQuery and PHP

I have a jQuery one that I've been looking at as well, but sadly my knowledge of jQuery is really low. Plus I am under a time crunch so picking up a new language isn't feasible at this point in time. So I scrapped even looking at that one.

More background information
This is not the first version of this website. The previous version required users to email in their photos, but with more than 700 registrants it made a lot of tedious work tying the two pieces of information together.

However, this did give me the ability to check and see exactly how the users would be sending their photos. The photos do not need to be cropped at all, they just need to be shrunk down to a usable size. There were people sending photos taken at 12 megapixels which really isn't required. The photos really only need to be a monitor appropriate size.

I would like to store the photos in a folder based on the participant ID number. I can create this folder and even store files in it. The issue I am running into is the re-sizing. Due to the extremely large file size of some of the submissions I wanted to find one that could resize locally if necessary and then upload a smaller file.
0
 
LVL 109

Accepted Solution

by:
Ray Paseur earned 500 total points
ID: 38724070
I understand the objective.  You may be able to find a client-side resize script written in jQuery; I do not have one.  But I do have the way to resize an image on the server side after it is uploaded.  A 12MP image is rather large to upload, and you might suggest to the client community that they use Photoshop or equivalent to resize the images before uploading.  But given that most people have high speed internet connections, a 12MP upload will finish in at most a few minutes.  It's not an ideal solution, but if you're under a time crunch, this may help.

You can pare this script down quite a bit if you're at the level of PHP 5.2+ and have the GD at 2+ installed.  You can use phpinfo() to check the current levels.

This script is set up to process PNG files, but it would only be a line or two change to process JPG files, too.
<?php // RAY_image_resize.php
error_reporting(E_ALL);

// RESIZE A PNG IMAGE TO FIT A PREDEFINED SIZE.  USES THE GD LIBRARY.
// MAN PAGES: http://php.net/manual/en/ref.image.php

// A FUNCTION TO DETERMINE IF GD IS AT LEVEL 2 OR MORE
function get_gd_info($display=FALSE)
{
    // IS GD INSTALLED AT ALL?  http://php.net/manual/en/function.gd-info.php
    if (!function_exists("gd_info"))
    {
        if ($display) echo "<br/>GD NOT INSTALLED\n";
        return FALSE;
    }

    // IF GD IS INSTALLED GET DETAILS
    $gd = gd_info();

    // IF DISPLAY IS REQUESTED, PRINT DETAILS
    if ($display)
    {
        echo "<br/>GD DETAILS:\n";
        foreach ($gd as $key => $value)
        {
            if ($value === TRUE)  $value = 'YES';
            if ($value === FALSE) $value = 'NO';
            echo "<br/>$key = $value \n";
        }
    }

    // RETURN THE VERSION NUMBER
    $gd_version = preg_replace('/[^0-9\.]/', '', $gd["GD Version"]);
    return $gd_version;
}


// A FUNCTION TO MAKE AN IMAGE INTO THE RIGHT WIDTH FOR PAGE DISPLAY
// WILL WORK IF GD2 NOT INSTALLED, BUT WILL MAKE BETTER IMAGES WITH GD2
// INPUT IS THE IMAGE FILE NAME, OUTPUT IS AN IMAGE RESOURCE, OR FALSE IF NO RESIZE NEEDED
function create_right_size_image($image, $width=300)
{
    // IS GD HERE?
    $gdv = get_gd_info();
    if (!$gdv) return FALSE;

    // GET AN IMAGE RESOURCE http://php.net/manual/en/function.imagecreatefromjpeg.php
    $source = imagecreatefrompng("$image");

    // GET THE X AND Y DIMENSIONS http://php.net/manual/en/function.imagesx.php
    $imageX = imagesx($source);
    $imageY = imagesy($source);

    // IF NO RESIZING IS NEEDED
    if ($imageX <= $width)
    {
        return FALSE;
    }

    // THE WIDTH IS TOO GREAT - MUST RESIZE
    $tnailX = $width;
    $tnailY = (int) (($tnailX * $imageY) / $imageX );

    // WHICH FUNCTIONS CAN RESIZE / RESAMPLE THE IMAGE?
    if ($gdv >= 2)
    {
        // IF GD IS AT LEVEL 2 OR ABOVE USE http://php.net/manual/en/function.imagecreatetruecolor.php
        $target = imagecreatetruecolor($tnailX, $tnailY);
        imagecopyresampled ($target, $source, 0, 0, 0, 0, $tnailX, $tnailY, $imageX, $imageY);
    }
    else
    {
        // IF GD IS AT A LOWER REVISION LEVEL
        $target = imagecreate($tnailX, $tnailY);
        imagecopyresized   ($target, $source, 0, 0, 0, 0, $tnailX, $tnailY, $imageX, $imageY);
    }
    // RETURN THE IMAGE RESOURCE
    return $target;
}



// SAMPLE CALLING SEQUENCE - SET THE FILE PATH URLS
$old = 'RAY_orig_600x374.png';
$new = 'RAY_temp_300x187.png';

// RESIZE THE FILE TO FIT DESIRED WIDTH, IF NECESSARY
if ($image_resource = create_right_size_image($old))
{
    // WRITE (OVERWRITE) THE IMAGE IN THE NEW FILE http://php.net/manual/en/function.imagepng.php
    imagepng($image_resource, $new);

    // FREE THE MEMORY USED FOR THE IMAGE
    imagedestroy($image_resource);

    // SHOW A LINK TO THE NEW IMAGE
    echo '<a target="_blank" href="' . $new . '">SEE NEW ' . $new . '</a>' . PHP_EOL;
}

// IF IMAGE DID NOT NEED TO BE RESIZED - WAS EQUAL OR SMALLER THAN DESIRED WIDTH
echo 'ORIGINAL: <a target="_blank" href="' . $old . '">SEE OLD ' . $old . '</a>' . PHP_EOL;

Open in new window

HTH, ~Ray
0
 
LVL 2

Author Closing Comment

by:shdwmage
ID: 38725085
Not 100% what I was looking for but I was able to make it work.

Thanks Ray
0
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 38725371
You're welcome.  Thanks for the points and thanks for using EE, ~Ray
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

813 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now