?
Solved

Replicate the EE Profile Photo Uploader

Posted on 2015-01-26
6
Medium Priority
?
82 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 111

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 111

Accepted Solution

by:
Ray Paseur earned 2000 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

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 111

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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The goal of the tutorial is to teach the user how to import photos into Adobe Lightroom efficiently and to keep everything organized.
The goal of the tutorial is to teach the user how to remove a natural vignette your photos and how to add vignette to your photos.
Suggested Courses

752 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