Solved

Replicate the EE Profile Photo Uploader

Posted on 2015-01-26
6
73 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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 

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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The goal of the tutorial is to teach the user how to add a water mark to there photo. Once you have a photo you like you have to go into the water mark setting and add a water mark to the image. You can either choose a text watermark or an image…

706 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