Solved

PHP - AJAX Photo Uploader

Posted on 2012-12-26
7
399 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
Comment Utility
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 108

Expert Comment

by:Ray Paseur
Comment Utility
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
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 2

Author Comment

by:shdwmage
Comment Utility
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 108

Accepted Solution

by:
Ray Paseur earned 500 total points
Comment Utility
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
Comment Utility
Not 100% what I was looking for but I was able to make it work.

Thanks Ray
0
 
LVL 108

Expert Comment

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

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Developers of all skill levels should learn to use current best practices when developing websites. However many developers, new and old, fall into the trap of using deprecated features because this is what so many tutorials and books tell them to u…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…

743 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

15 Experts available now in Live!

Get 1:1 Help Now