Solved

Replicate the EE Profile Photo Uploader

Posted on 2015-01-26
6
74 Views
Last Modified: 2015-01-27
I would like to replicate the process that Experts Exchanges uses to upload a profile image. I need to do the same thing on a site that I'm working on but I want to use jQuery and php.

I've tried using Inspect Element to see how EE is doing it, but I'm not following it.

I would like someone to point me in the direction where I can find a script/plugin that will do the same thing, with such incredible smoothness, within a php/jquery environment.

Thank you.
0
Comment
Question by:pkonstan1
  • 3
  • 3
6 Comments
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 40571699
Have you started writing any of the code?  If so, please show us where you are on the project and where you're stuck.  Are you conversant with jQuery, or would an introductory example help?  When we have broad questions like this there are so many moving parts that it may be impossible to give you a complete end-to-end example.  So if we know what you've tried and what specific help you need, we can focus on those issues.

These are the things I believe are in play (and there may be more, please correct me if I'm off base).

1. You need to upload an image from a client to a server
2. You need to store the image on the server and coordinate a database that allows you to retrieve the image file by a key
3. You need the key to be linked to a client profile so you can display the correct image
4. You need to be able to resize and sharpen the image
5. You need to perform these actions with a hidden HTTP request initiated via jQuery

Which parts can we assume you have covered and which parts need our guidance?
0
 

Author Comment

by:pkonstan1
ID: 40571832
What I was ideally hoping for would be somebody who would say, "Oh yeah, I've seen a packages that does it, you can go buy it here for $20..."  But the few packages I've looked at are a little rough around the edges.

But if there was no luck with that option above, what I'm most interested in is the ability to resize, crop and  center that will be saved as the profile image. I don't want it to be a super big image, so that's an important part. So on your list above, it's points 4 and 5 where I'm looking for help.
0
 
LVL 108

Accepted Solution

by:
Ray Paseur earned 500 total points
ID: 40572473
As fortune would have it, I am writing exactly this code now.  It will be released as a Laravel extension later this year, but you can have the first steps (and you don't need Laravel to use the existing code).
http://iconoun.com/demo/image_resize_and_crop.php

<?php // demo/image_resize_and_crop.php
error_reporting(E_ALL);


// RESIZE AN IMAGE PROPORTIONALLY AND CROP TO THE CENTER


function resize_and_crop($original_image_url, $thumb_image_url, $thumb_w, $thumb_h, $quality=75)
{
    // ACQUIRE THE ORIGINAL IMAGE: http://php.net/manual/en/function.imagecreatefromjpeg.php
    $original = imagecreatefromjpeg($original_image_url);
    if (!$original) return FALSE;

    // GET ORIGINAL IMAGE DIMENSIONS
    list($original_w, $original_h) = getimagesize($original_image_url);

    // RESIZE IMAGE AND PRESERVE PROPORTIONS
    $thumb_w_resize = $thumb_w;
    $thumb_h_resize = $thumb_h;
    if ($original_w > $original_h)
    {
        $thumb_h_ratio  = $thumb_h / $original_h;
        $thumb_w_resize = (int)round($original_w * $thumb_h_ratio);
    }
    else
    {
        $thumb_w_ratio  = $thumb_w / $original_w;
        $thumb_h_resize = (int)round($original_h * $thumb_w_ratio);
    }
    if ($thumb_w_resize < $thumb_w)
    {
        $thumb_h_ratio  = $thumb_w / $thumb_w_resize;
        $thumb_h_resize = (int)round($thumb_h * $thumb_h_ratio);
        $thumb_w_resize = $thumb_w;
    }

    // CREATE THE PROPORTIONAL IMAGE RESOURCE
    $thumb = imagecreatetruecolor($thumb_w_resize, $thumb_h_resize);
    if (!imagecopyresampled($thumb, $original, 0,0,0,0, $thumb_w_resize, $thumb_h_resize, $original_w, $original_h)) return FALSE;

    // ACTIVATE THIS TO STORE THE INTERMEDIATE IMAGE
    // imagejpeg($thumb, 'thumbs/temp_' . $thumb_w_resize . 'x' . $thumb_h_resize . '.jpg', 100);

    // CREATE THE CENTERED CROPPED IMAGE TO THE SPECIFIED DIMENSIONS
    $final = imagecreatetruecolor($thumb_w, $thumb_h);

    $thumb_w_offset = 0;
    $thumb_h_offset = 0;
    if ($thumb_w < $thumb_w_resize)
    {
        $thumb_w_offset = (int)round(($thumb_w_resize - $thumb_w) / 2);
    }
    else
    {
        $thumb_h_offset = (int)round(($thumb_h_resize - $thumb_h) / 2);
    }

    if (!imagecopy($final, $thumb, 0,0, $thumb_w_offset, $thumb_h_offset, $thumb_w_resize, $thumb_h_resize)) return FALSE;

    // STORE THE FINAL IMAGE - WILL OVERWRITE $thumb_image_url
    if (!imagejpeg($final, $thumb_image_url, $quality)) return FALSE;
    return TRUE;
}


// USE CASE
echo '<a target="_blank" href="images/image_600x374.jpg">Original 600x374</a><br/>';

resize_and_crop('images/image_600x374.jpg', 'thumbs/temp_100x100.jpg', 100, 100);
echo '<a target="_blank" href="thumbs/temp_100x100.jpg">100x100</a><br/>';

resize_and_crop('images/image_600x374.jpg', 'thumbs/temp_200x100.jpg', 200, 100);
echo '<a target="_blank" href="thumbs/temp_200x100.jpg">200x100</a><br/>';

resize_and_crop('images/image_600x374.jpg', 'thumbs/temp_200x300.jpg', 200, 300);
echo '<a target="_blank" href="thumbs/temp_200x300.jpg">200x300</a><br/>';

Open in new window

HTH, ~Ray
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Closing Comment

by:pkonstan1
ID: 40573107
This is great. We'll build what we can over the next couple of days and will use your code as a part of it. If we have more questions, I'll come back with a separate specific question using your above flow as a guideline.

Thanks again.
0
 

Author Comment

by:pkonstan1
ID: 40573544
Here is an additional site with some insight into this.
Ajax Image Upload and Resize with jQuery and PHP
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 40573966
Glad to help get it pointed in the right direction.  Thanks for the points, ~Ray
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

In a previous article here at Experts Exchange (http://www.experts-exchange.com/articles/18414/Create-a-PDF-file-with-Contact-Sheets-montage-of-thumbnails-for-all-JPG-files-in-a-folder-and-each-of-its-subfolders-using-an-automated-batch-method.html)…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The goal of the tutorial is to teach the user what gradient filters are and how to use them. When you have a photo and some part of the photo is either over exposed or under exposed, you use a gradient filter to help mask the need to touch up th…
The goal of the tutorial is to teach the user the full work flow of how to use flash media encoder to stream onto YouTube.

911 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