[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 84
  • Last Modified:

Replicate the EE Profile Photo Uploader

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
pkonstan1
Asked:
pkonstan1
  • 3
  • 3
1 Solution
 
Ray PaseurCommented:
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
 
pkonstan1Author Commented:
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
 
Ray PaseurCommented:
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
pkonstan1Author Commented:
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
 
pkonstan1Author Commented:
Here is an additional site with some insight into this.
Ajax Image Upload and Resize with jQuery and PHP
0
 
Ray PaseurCommented:
Glad to help get it pointed in the right direction.  Thanks for the points, ~Ray
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now