Trent Richardson
Finally, I’ve put together an example of UberUploadCropper, as well as getting it up to date with Uploadify 2.1. If you don’t remember what UberUploadCropper is, it is a small jquery plugin that brings together Uploadify, Impromptu, and Jcrop, to seamlessly upload and crop images. Here’s a visual:
For a brief snippet of code of how to implement it, check out my previous post on UberUploadCropper. But, I have one more special treat. I have finally put together an example. Be warned, this example is NOT for production use. It is only to demonstrate how to link everything together. When uploading files there are security concerns among other things that need to be addressed.
Download UberUploadCropper Example. (Be sure to read the README file. You have to set your upload path!)
Now before you start fussing about how the quality of the cropped images are, or about if you upload a big image Impromptu goes outside the screen, I have commented in the files where you should be doing your resizing and cropping, so when an image is uploaded you should make some changes (resize it to a reasonable size for the screen). I will leave resizing and everything up to you. I have restricted the uploads to only jpg for simplicity of the example, although my production version does jpg, gif, and png. And I’m sure most of you are using a nice image manipulation class (or should be) to handle different image types.
As always I’m open for suggestion or if anyone makes nice changes they are always welcome too. Enjoy! (also don’t forget if you are looking for more ideas to help out your site visit FetchIdeas.com)
Related posts:
20 Responses
TechnicalGanXta
12|Apr|2010Not bad, Trent. Keep up the good work.
Jeffrey Gilbert
12|Apr|2010Sweet. Going to use this in my site redesign. Thanks!
Mark
15|Apr|2010Great work, Niec to finally find a good Complete upload/crop solution.
I’m trying to integrate this into my site and have hit a little bit of a roadblock I was hoping either you or someone could help me with. I don’t have much JQuery experience so going around in circles here.
I’ve added resize code to stop the image from going off the screen if it’s too large. The resizing is done in uploadify.php
When I resize I save 2 files. The original.jpg and resized.jpg I then display the smaller resized.jpg to the user for cropping. BUT when they crop the resized one I want to be able to apply it to the original.jpg using the “Explicit Sizing Method ” of JCrop as outlined here:
http://deepliquid.com/content/Jcrop_Sizing_Issues.html
The idea being I then have two resized images, one used for my end product and one used for screen resolution.
I’m having issues though getting the original width/height into the trueSize values for jcrop.
I’ll keep working on it, but it’s probably a really easy fix for someone with better JQuery knowledge than I.
BUT a big thanks for all your hard work :).
Cheers.
trent
15|Apr|2010Sounds like Explicit sizing method or Box Sizing Method should do what you want. Then you shouldn’t have to resize at all in uploadify.php. that way jcrop handles scaling down (it doesn’t physically resize the image, it just visually resizes) and let it compute the coords
Mark
15|Apr|2010Hi Trent,
I was going down that path at first, but would prefer to use a proper resized image.
EG: Using Box Sizing.
User uploads 3MB image
Users browser then downloads 3MB image but visually resizes
TOTAL: 6MB bandwidth
vs
trueSize
User uploads 3MB image
Server resizes image to ~100k
Users browser then downloads 100k image but resizes 3MB image on server.
Total: 3.1MB bandwidth.
Anyway going to have more of a play today so will see how I go :).
Thanks again.
Mark
16|Apr|2010I ended up solving this issue by just doing my own ‘trueSize’ resizing in php :). Not the prettiest method but it works until I get my head around jquery a bit better.
cheers.
trent
16|Apr|2010Your thinking on resizing on the php side on upload is correct. This is the same process I use, although I’ve learned with this there are dozens of ways to approach this. I should have done a quick resize in the example but I didn’t want to get into all that logic, and just keep it simple. More times than not a client doesn’t know how to resize an image before uploading from their camera. This could be costly.
Amy
23|Apr|2010Great work, Niec to finally find a good Complete upload/crop solution.
I’m trying to integrate this into my site and have hit a little bit of a roadblock I was hoping either you or someone could help me with. I don’t have much JQuery experience so going around in circles here.
I’ve added resize code to stop the image from going off the screen if it’s too large. The resizing is done in uploadify.php
When I resize I save 2 files. The original.jpg and resized.jpg I then display the smaller resized.jpg to the user for cropping. BUT when they crop the resized one I want to be able to apply it to the original.jpg using the “Explicit Sizing Method ” of JCrop as outlined here:
http://deepliquid.com/content/Jcrop_Sizing_Issues.html
The idea being I then have two resized images, one used for my end product and one used for screen resolution.
I’m having issues though getting the original width/height into the trueSize values for jcrop.
I’ll keep working on it, but it’s probably a really easy fix for someone with better JQuery knowledge than I.
BUT a big thanks for all your hard work :).
Cheers.
trent
23|Apr|2010I guess I’ve not had to deal with larger images tooo much so I’ve not had to deal with this issue directly. But sounds like letting Jcrop scale it down to get the correct ratio for the coordinates is what you need, although whether box or explicit method I’m not sure.. I might should play with this and work up an example of my findings as that seems to be the most common roadblock I’ve seen people mention so far.
If you come up with a good solution please don’t hesitate to post back here :)
icuucme
16|Jun|2010not working for me…donno what i’m doing wrong. i see the browse button, changed the upload path. When i browse to the file and select ok it basically shows like upload was complete, but the file isnt in the upload folder
Alidad Modjtabai
19|Feb|2011this is nice scripts, but im having trouble to make crop, in crop.php page is changed folder path name to thumbs which is going to be like this
define(“UPLOAD_PATH”, ‘/thumbs/’); // CHANGE THIS FOR YOUR NEEDS!
however, when uploaded and crop it, i only see normal images from upload folder but not in “thumbs” folder for crop images.
any idea that you can help me what did i missed please.
DevSha
20|Mar|2011I am trying to use this tool, but stuck with multi upload. The pop-up shows ‘next’, ‘previous’ navigations as well, but clicking them messes up everything…..
trent
23|Mar|2011Are you doing more than one upload (multi)? The version of jcrop being used at the time of development didn’t like being shown and hidden and recreated on the fly, so upload cropper killed out on more than one at the time.
Also that being said there may be a newer version of jCrop that works properly…
Andrew
31|Mar|2011Excellent script, thanks for the well put together demo.
I have having issues with the parameters in the index.php file however that I would appreciate some background on.
I want to specify an aspect ratio that I lock the crop to, as well as being able to lock the crop to a minimum size.
By using the appropriate functions in the index.php page, I cant seem to get it to be able to do what I need it to do.
If I set the minimum size, no problems, but as soon as I try to also tell it to let the user resize, it breaks both the minimum size and the aspect restrictions.
In fact, I cant actually get the aspect ratio setting to do anything.
Any ideas what I am missing?
Also, what function controls the display of the thumbnail on the index page? I want to have it display larger?
cheers
Andrew
Nate Dawg
10|Jun|2011as mentioned above i too am having problems resizing the image so that it fits on screen but i have no background of jquery at all, with basic javascript. in oither words i wouldnt know where to start. just wondered if you had come up with a soultion as of yet.
other than that great solution.
Thanks,
Nate
trent
10|Jun|2011The entire serverside routine can get a little tricky, I admit.
-First you’re going to have the file uploaded, make a copy of the original file
-Resize the uploaded image (not the copy) to fit in the width/height of the promt (there are many resizing routines out there for php, python, ruby, etc.. to copy this from), then return this image from the serverside
-Next the user will be cropping the image, it will send you the coords of the cropped area
-Now you have the size of the uploaded and resized image, and the coordinates of the cropped area. You have to scale these numbers up to the size of the “copied original image” and perform the crop on it.
keeping the copy of the full size image maintains the quality. Otherwise we would be resizing, cropping, then resizing back up to our prefered size. Its best to keep the resizing to a minimum or else you lose quality.
wad
19|Oct|2011If the image is too tall it doesn’t allow you to scroll down.
No Scroll bars appear, no matter how much over flow I add.
I do not want to resize it , as the whole point of cropping is to grab the piece you want.
This script is awesome but this is it;s tragic flaw.
has anyone fixed this?
no matter how much i fiddle with the impromptu code it does not work. even just getting the “done” button to the top would really help things because right now someone on a small screen cannot even hit DONE and thus the script does not work unless you upload a tiny image which defeats the purpose of cropping
Please advise, this script is too awesome to give up!
trent
19|Oct|2011Swap out the Impromptu with the latest from Github, this was a recent change with Impromptu, probably not included with the upload cropper
Greg
02|Dec|2011Thanks for this great work !
Anyone knows how to add 2 buttons in order to set defined selections ? Such as one button for a fixed vertical selection, and another for a fixed horizontal selection.
I tried it, but no way to release or destroy the initial selection…
Ronniee
06|Apr|2012Man, You did a great job!!superb. I have implemented this script in my site and everything is working nicely. I just faced one problem, tried a lot to find out the solution, but still did not.
If I use ‘sizeLimit’ for uploading, then larger file can’t be uploaded, it is showing uploading error, that’s nice. But, it is also showing the cropping prompt simultaneously with “Progressing” text inside the prompt. When any uploading error occurs, then that prompt should not come, right?
Please help.
Thanks a lot.